SVG yolunun dolgu rengini CSS ile değiştirebilir miyim?

Takip koduna sahibim:

  <span>
     <svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;">
        <desc></desc>
        <defs/>
        <path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/>
      </svg>&nbsp;
  </span>

SVG yolunun dolgu rengini, yol etiketi içinde değiştirmeden CSS veya başka bir yolla değiştirmek mümkün müdür?

Evet, SVG'ye CSS uygulayabilirsiniz, ancak HTML biçimlendirirken olduğu gibi öğeyle eşleşmeniz gerekir. Yalnızca tüm SVG yollarına uygulamak istiyorsanız, örneğin şunları kullanabilirsiniz:

​path {
    fill: blue;
}​

Harici CSS fill, en azından test ettiğim WebKit ve Gecko tabanlı tarayıcılarda yolun özelliğini geçersiz kılıyor gibi görünüyor . Tabii ki, yazarsanız, <path style="fill: green">bu harici CSS'yi de geçersiz kılar.

öğenin üzerine gelip rengi değiştirmek istiyorsanız şunu deneyin:

path:hover{
  fill:red;
}

Bir SVG dosyasının kaynak koduna girerseniz, fill özelliğini değiştirerek renk dolgusunu değiştirebilirsiniz.

<svg fill="#3F6078" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg> 

En sevdiğiniz metin düzenleyicisini kullanın, SVG dosyasını açın ve onunla oynayın.

svg circle için bu css koymak.

svg:hover circle{
    fill: #F6831D;
    stroke-dashoffset: 0;
    stroke-dasharray: 700;
    stroke-width: 2;
}

Css-tricks konusunda inanılmaz bir kaynakla karşılaştım: https://css-tricks.com/using-svg/

Burada açıklanan bir kaç çözüm var.

Kaynak svg'de minimum düzenleme gerektiren ve ayrıca html belgesine gömülmesini gerektirmeyeni tercih ettim. Bu seçenek <object>etiketi kullanır .

Svg dosyasını kullanarak html'nize ekleyin <object>; Ayrıca html özniteliklerini widthve height. Bu genişlik ve yükseklikleri kullanarak svg belgesi ölçeklendirilmez, ben ilişkili svg css dosyamdaki etiket transform: scale(...)için bir css deyimi kullanarak çalıştım svg.

<object type="image/svg+xml" data="myfile.svg" width="64" height="64"></object>

Svn belgenize eklemek için bir css dosyası oluşturun. Kaynak svg yolum 16px olarak ölçeklendirildi, dört faktörle 64'e yükselttim. Sadece bir yol vardı, bu yüzden daha spesifik olarak seçmeye gerek yoktu, ancak yol bir dolgu özniteliği vardı, bu yüzden !IMPORTANTemsali almaya css zorlamak için kullanmak zorunda kaldı .

#svg2 {
    width: 64px; height: 64px;
    transform: scale(4);
}
path {
    fill: #333 !IMPORTANT;
}

Hedef svg dosyanızı açılış <svgetiketinden önce bir stil sayfası içerecek şekilde düzenleyin; Href svg dosyası url göreli olduğunu unutmayın.

<?xml-stylesheet type="text/css" href="myfile.css" ?>

Bu sözdizimini kullanabilirsiniz, ancak SVG dosyasında bazı değişiklikler yapılması gerekecektir. Ve herhangi bir dolgu / konturu SVG'nin kendisinden çıkarın.

icon.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<!-- use symbol instead of defs and g, 
  must add viewBox on symbol just copy yhe viewbox from the svg tag itself
  must add id on symbol
-->
<symbol id="location" viewBox="0 0 430.114 430.114">
  <!-- add all the icon's paths and shapes here -->
  <path d="M356.208,107.051c-1.531-5.738-4.64-11.852-6.94-17.205C321.746,23.704,261.611,0,213.055,0   C148.054,0,76.463,43.586,66.905,133.427v18.355c0,0.766,0.264,7.647,0.639,11.089c5.358,42.816,39.143,88.32,64.375,131.136   c27.146,45.873,55.314,90.999,83.221,136.106c17.208-29.436,34.354-59.259,51.17-87.933c4.583-8.415,9.903-16.825,14.491-24.857   c3.058-5.348,8.9-10.696,11.569-15.672c27.145-49.699,70.838-99.782,70.838-149.104v-20.262   C363.209,126.938,356.581,108.204,356.208,107.051z M214.245,199.193c-19.107,0-40.021-9.554-50.344-35.939   c-1.538-4.2-1.414-12.617-1.414-13.388v-11.852c0-33.636,28.56-48.932,53.406-48.932c30.588,0,54.245,24.472,54.245,55.06   C270.138,174.729,244.833,199.193,214.245,199.193z"/>
</symbol>

icon.html

<svg><use xlink:href="file_path/location.svg#location"></use></svg>

Svg'nin yol dolgu rengini değiştirmek mümkündür. CSS snippet'i için aşağıya bakın:

1. Rengi tüm yollara uygulamak için: svg > path{ fill: red }

2. İlk d yoluna başvurmak için: svg > path:nth-of-type(1){ fill: green }

3. İkinci d yoluna başvurmak için: svg > path:nth-of-type(2){ fill: green}

4. Farklı d yoluna uygulamak için yalnızca yol numarasını değiştirin:
   svg > path:nth-of-type(${path_number}){ fill: green}

5. Açısal 2 ila 8'deki CSS'yi desteklemek için kapsülleme kavramını kullanın:

:host::ng-deep svg path:nth-of-type(1){
        fill:red;
    }

Tüm svg'nizi koyun:

fill="var(--svgcolor)"

Css cinsinden:

:root {
  --svgcolor: tomato;
}

Sahte sınıfları kullanmak için:

span.github:hover {
  --svgcolor:aquamarine;
}

açıklama

root = html sayfası.
--svgcolor = bir değişken.
span.github = sınıf github, içinde bir svg simgesi olan bir span öğesi seçme ve sözde sınıf vurgusu atama.