如何在CSS中样式化特定的SVG路径？

Question

是否可以使用两个不同的CSS类别来不同地样式化相同的SVG符号。就像在这个jsfiddle中所示。

.shape-55 {
  width: 55px;
  height: 55px;
}
/* Want to color only the first path in red */
.shape-style-1 path:nth-of-type(1) {
  fill: red;
}
/* Want to color only the first path in blue */
.shape-style-2 path:nth-of-type(1) {
  fill: blue;
}

<!-- SVG Spritesheets-->
<svg class="shape" style="display:none;">
  <symbol viewBox="0 0 64 64" id="shape-1">
    <title>sw_av_a_tkn-cscd</title>
    <g>
      <g>
        <path d="M22.541,0C10.511,0,0.723,4.298,0.723,9.581v4.455c0,5.283,9.788,9.581,21.817,9.581c12.032,0,21.819-4.298,21.819-9.581
   V9.581C44.359,4.298,34.572,0,22.541,0z M40.568,14.969v3.733c-2.49,1.708-6.309,3.034-10.837,3.726v-3.804
   C34.17,17.941,37.963,16.646,40.568,14.969z M7.197,3.443c1.56,0.624,2.804,1.122,3.78,1.513c1.959-0.907,4.483-1.582,7.34-1.925
   c-0.348-0.535-0.787-1.213-1.332-2.061c1.771-0.204,3.635-0.315,5.556-0.315c1.926,0,3.792,0.112,5.569,0.318
   c-0.548,0.847-0.984,1.522-1.329,2.058c2.851,0.343,5.381,1.018,7.34,1.925c0.973-0.391,2.215-0.888,3.771-1.508
   c3.268,1.453,5.387,3.368,5.748,5.483c-2.227,0.07-3.982,0.123-5.357,0.167c0.025,0.158,0.043,0.318,0.043,0.482
   c0,1.35-0.918,2.608-2.498,3.665c1.137,0.313,2.582,0.713,4.414,1.219c-2.543,1.629-6.314,2.89-10.756,3.542
   c-0.682-0.83-1.229-1.495-1.661-2.02c-1.649,0.252-3.422,0.388-5.271,0.388c0,0-0.003,0-0.006,0c-1.235,0-0.006,0.66-0.006,0
   c0,0,0,0-0.002,0c-1.849,0-3.621-0.136-5.271-0.388c-0.432,0.524-0.979,1.19-1.664,2.021c-4.448-0.653-8.223-1.913-10.765-3.544
   c1.828-0.506,3.273-0.905,4.41-1.219c-1.58-1.057-2.495-2.315-2.495-3.665c0-0.164,0.018-0.324,0.041-0.482
   C5.424,9.055,3.672,9.002,1.44,8.932C1.801,6.814,3.923,4.899,7.197,3.443z M4.512,14.969c2.611,1.679,6.406,2.975,10.854,3.656
   v3.806c-4.541-0.691-8.359-2.019-10.854-3.729V14.969z"></path>
        <path d="M22.541,13.296c4.596,0,8.199-1.633,8.199-3.715c0-2.084-3.604-3.718-8.199-3.718c-4.597,0-8.197,1.634-8.197,3.718
   C14.343,11.663,17.944,13.296,22.541,13.296z M22.541,6.521c4.089,0,7.54,1.4,7.54,3.06c0,1.658-3.451,3.059-7.54,3.059
   c-4.087,0-7.541-1.4-7.541-3.059C15,7.922,18.454,6.521,22.541,6.521z"></path>
      </g>
      <path d="M25.038,34.037c-0.81,0.059-1.638,0.094-2.483,0.094c0,0-0.003,0-0.006,0c0,0-0.002,0-0.006,0c0,0,0,0-0.002,0
  c-1.849,0-3.621-0.141-5.271-0.391c-0.432,0.524-0.979,1.191-1.664,2.022c-4.448-0.653-8.223-1.912-10.765-3.546
  c1.288-0.355,2.376-0.655,3.312-0.912c-3.259-1.173-5.81-2.753-7.378-4.609c-0.028,0.211-0.052,0.424-0.052,0.64v4.456
  c0,5.266,9.721,9.548,21.694,9.58C22.864,38.741,23.758,36.27,25.038,34.037z M15.367,40.185c-4.541-0.69-8.359-2.021-10.854-3.729
  v-3.733c2.611,1.679,6.406,2.976,10.854,3.658V40.185z"></path>
      <path d="M22.083,45.084c0-0.699,0.041-1.388,0.104-2.069c-1.72-0.018-3.375-0.143-4.917-0.376c-0.432,0.524-0.979,1.189-1.664,2.02
  c-4.448-0.652-8.223-1.912-10.765-3.544c1.288-0.355,2.376-0.659,3.312-0.915c-3.259-1.172-5.81-2.749-7.378-4.605
  c-0.028,0.21-0.052,0.426-0.052,0.639v4.456c0,5.281,9.788,9.578,21.817,9.578c0.061,0,0.116-0.003,0.175-0.003
  C22.316,48.6,22.083,46.868,22.083,45.084z M15.367,49.08c-4.541-0.69-8.359-2.017-10.854-3.728v-3.731
  c2.611,1.679,6.406,2.974,10.854,3.655V49.08z"></path>
      <path d="M23.161,51.904c-0.204,0.003-0.402,0.023-0.606,0.023c0,0-0.003,0-0.006,0c0,0-0.002,0-0.006,0c0,0,0,0-0.002,0
  c-1.849,0-3.621-0.14-5.271-0.391c-0.432,0.524-0.979,1.189-1.664,2.023c-4.448-0.653-8.223-1.915-10.765-3.548
  c1.288-0.355,2.376-0.655,3.312-0.912c-3.259-1.172-5.81-2.752-7.378-4.611c-0.028,0.213-0.052,0.426-0.052,0.642v4.456
  c0,5.282,9.788,9.581,21.817,9.581c1.519,0,2.999-0.069,4.427-0.198C25.3,56.883,23.998,54.499,23.161,51.904z M15.367,57.979
  c-4.541-0.691-8.359-2.018-10.854-3.726v-3.736c2.611,1.679,6.406,2.976,10.854,3.657V57.979z"></path>
      <g>
        <path d="M44.359,22.805v-4.37c0-0.213-0.02-0.428-0.055-0.639c-1.568,1.858-4.119,3.437-7.375,4.608
   c0.863,0.237,1.877,0.518,3.043,0.84C41.393,22.958,42.859,22.805,44.359,22.805z"></path>
        <path d="M26.123,32.331c1.037-1.479,2.25-2.82,3.608-4.007v-0.846c0.454-0.069,0.897-0.151,1.341-0.232
   c0.432-0.322,0.868-0.633,1.323-0.923c-0.933,0.207-1.9,0.391-2.909,0.539c-0.682-0.831-1.229-1.495-1.661-2.02
   c-1.649,0.249-3.422,0.388-5.271,0.388c0,0-0.003,0-0.006,0c0,0-0.002,0-0.006,0c0,0,0,0-0.002,0
   c-1.849,0-3.621-0.139-5.271-0.388c-0.432,0.524-0.979,1.188-1.664,2.021c-4.448-0.653-8.223-1.914-10.765-3.546
   c1.288-0.355,2.376-0.657,3.312-0.914c-3.259-1.172-5.81-2.75-7.378-4.608c-0.028,0.211-0.052,0.426-0.052,0.639v4.456
   c0,5.283,9.788,9.58,21.817,9.58C23.761,32.471,24.954,32.417,26.123,32.331z M15.367,31.285
   c-4.541-0.693-8.359-2.018-10.854-3.728v-3.733c2.611,1.679,6.406,2.974,10.854,3.656V31.285z"></path>
      </g>
      <path d="M44.359,26.166c-10.445,0-18.914,8.469-18.914,18.918C25.446,55.53,33.914,64,44.359,64
  c10.451,0,18.918-8.47,18.918-18.916C63.277,34.635,54.811,26.166,44.359,26.166z M53.428,46.976c0,0.49-0.402,0.889-0.891,0.889
  h-5.393v5.393c0,0.49-0.4,0.893-0.891,0.893h-3.789c-0.486,0-0.889-0.402-0.889-0.893v-5.393h-5.393
  c-0.488,0-0.889-0.398-0.889-0.889v-3.786c0-0.49,0.4-0.892,0.889-0.892h5.393v-5.393c0-0.489,0.402-0.886,0.889-0.886h3.789
  c0.49,0,0.891,0.396,0.891,0.886v5.393h5.393c0.488,0,0.891,0.401,0.891,0.892V46.976z"></path>
    </g>
  </symbol>
</svg>
<div>
  <svg class="shape-55 shape-style-1">
    <use xlink:href="#shape-1"></use>
  </svg>
</div>
<div>
  <svg class="shape-55 shape-style-2">
    <use xlink:href="#shape-1"></use>
  </svg>
</div>

当使用CSS类shape-style-1时，我需要将第一个"path"颜色设置为红色，当使用shape-style-2时，将其设置为蓝色。

谢谢。

- Frntz

---

我认为不是这样的...这可能是正确的 - https://dev59.com/d2Yr5IYBdhLWcg3wcJx0 ...但有兴趣学习不同的方法。 - Paulie_D

这是不可能的。你必须克隆这个符号，并更新每个克隆以具有不同的ID和不同的颜色。 - Robert Longson

Answer 1

你可以为父级的div设置颜色，并使用fill: currentColor将该颜色用于相应的SVG元素。

因此，这段CSS代码：

div > svg {
  width: 55px;
  height: 55px;
}

svg g g > path:nth-of-type(1) {
  fill: currentColor;
}

div:nth-of-type(even) {
  color: red;
}

div:nth-of-type(odd) {
  color: blue;
}

...用于此HTML：

<div><svg><use xlink:href="#shape-1"></use></svg></div>
<div><svg><use xlink:href="#shape-1"></use></svg></div>
<div><svg><use xlink:href="#shape-1"></use></svg></div>
<div><svg><use xlink:href="#shape-1"></use></svg></div>

…看起来会像这样：

Fiddle

- Rick Hitchcock

Answer 2

您可以实现您想要的效果，但是没有CSS。请参考此fiddle：http://jsfiddle.net/41e0f7z5/2/ 技巧在于您可以将一个fill属性设置给<use>元素。然后，您的符号由一个路径和一个拥有所有其他路径的组成。该组有一个fill属性被设置为黑色。但是，因为第一个路径没有fill属性，它将继承自<use>元素。

<svg class="shape" style="display:none;">
    <symbol viewBox="0 0 64 64" id="shape-1">
        <path d="..."/>
        <g fill="black">
            <path d="..." />
            <path d="..." />
            <path d="..." />
            ...
        </g>
    </symbol>
</svg>

  <div>
    <svg class="shape-55"> 
        <use xlink:href="#shape-1" fill="red"></use>
    </svg>
</div>
<div>
    <svg class="shape-55"> 
        <use xlink:href="#shape-1" fill="blue"></use>
    </svg>
</div>

- Tolokoban

Answer 3

像这样的东西？

.shape-55 {
    width: 55px;
    height: 55px;
}

<body>
    <!-- SVG Spritesheets-->
    <svg class="shape" style="display:none;">
        <symbol viewBox="0 0 64 64" id="shape-1">
          <title>sw_av_a_tkn-cscd</title>
            <path d="M22.541,0C10.511,0,0.723,4.298,0.723,9.581v4.455c0,5.283,9.788,9.581,21.817,9.581c12.032,0,21.819-4.298,21.819-9.581
   V9.581C44.359,4.298,34.572,0,22.541,0z M40.568,14.969v3.733c-2.49,1.708-6.309,3.034-10.837,3.726v-3.804
   C34.17,17.941,37.963,16.646,40.568,14.969z M7.197,3.443c1.56,0.624,2.804,1.122,3.78,1.513c1.959-0.907,4.483-1.582,7.34-1.925
   c-0.348-0.535-0.787-1.213-1.332-2.061c1.771-0.204,3.635-0.315,5.556-0.315c1.926,0,3.792,0.112,5.569,0.318
   c-0.548,0.847-0.984,1.522-1.329,2.058c2.851,0.343,5.381,1.018,7.34,1.925c0.973-0.391,2.215-0.888,3.771-1.508
   c3.268,1.453,5.387,3.368,5.748,5.483c-2.227,0.07-3.982,0.123-5.357,0.167c0.025,0.158,0.043,0.318,0.043,0.482
   c0,1.35-0.918,2.608-2.498,3.665c1.137,0.313,2.582,0.713,4.414,1.219c-2.543,1.629-6.314,2.89-10.756,3.542
   c-0.682-0.83-1.229-1.495-1.661-2.02c-1.649,0.252-3.422,0.388-5.271,0.388c0,0-0.003,0-0.006,0c-1.235,0-0.006,0.66-0.006,0
   c0,0,0,0-0.002,0c-1.849,0-3.621-0.136-5.271-0.388c-0.432,0.524-0.979,1.19-1.664,2.021c-4.448-0.653-8.223-1.913-10.765-3.544
   c1.828-0.506,3.273-0.905,4.41-1.219c-1.58-1.057-2.495-2.315-2.495-3.665c0-0.164,0.018-0.324,0.041-0.482
   C5.424,9.055,3.672,9.002,1.44,8.932C1.801,6.814,3.923,4.899,7.197,3.443z M4.512,14.969c2.611,1.679,6.406,2.975,10.854,3.656
   v3.806c-4.541-0.691-8.359-2.019-10.854-3.729V14.969z"></path>

          <g  fill="black">
            <path d="M22.541,13.296c4.596,0,8.199-1.633,8.199-3.715c0-2.084-3.604-3.718-8.199-3.718c-4.597,0-8.197,1.634-8.197,3.718
   C14.343,11.663,17.944,13.296,22.541,13.296z M22.541,6.521c4.089,0,7.54,1.4,7.54,3.06c0,1.658-3.451,3.059-7.54,3.059
   c-4.087,0-7.541-1.4-7.541-3.059C15,7.922,18.454,6.521,22.541,6.521z"></path>
            <path d="M25.038,34.037c-0.81,0.059-1.638,0.094-2.483,0.094c0,0-0.003,0-0.006,0c0,0-0.002,0-0.006,0c0,0,0,0-0.002,0
  c-1.849,0-3.621-0.141-5.271-0.391c-0.432,0.524-0.979,1.191-1.664,2.022c-4.448-0.653-8.223-1.912-10.765-3.546
  c1.288-0.355,2.376-0.655,3.312-0.912c-3.259-1.173-5.81-2.753-7.378-4.609c-0.028,0.211-0.052,0.424-0.052,0.64v4.456
  c0,5.266,9.721,9.548,21.694,9.58C22.864,38.741,23.758,36.27,25.038,34.037z M15.367,40.185c-4.541-0.69-8.359-2.021-10.854-3.729
  v-3.733c2.611,1.679,6.406,2.976,10.854,3.658V40.185z"></path>
            <path d="M22.083,45.084c0-0.699,0.041-1.388,0.104-2.069c-1.72-0.018-3.375-0.143-4.917-0.376c-0.432,0.524-0.979,1.189-1.664,2.02
  c-4.448-0.652-8.223-1.912-10.765-3.544c1.288-0.355,2.376-0.659,3.312-0.915c-3.259-1.172-5.81-2.749-7.378-4.605
  c-0.028,0.21-0.052,0.426-0.052,0.639v4.456c0,5.281,9.788,9.578,21.817,9.578c0.061,0,0.116-0.003,0.175-0.003
  C22.316,48.6,22.083,46.868,22.083,45.084z M15.367,49.08c-4.541-0.69-8.359-2.017-10.854-3.728v-3.731
  c2.611,1.679,6.406,2.974,10.854,3.655V49.08z"></path>
            <path d="M23.161,51.904c-0.204,0.003-0.402,0.023-0.606,0.023c0,0-0.003,0-0.006,0c0,0-0.002,0-0.006,0c0,0,0,0-0.002,0
  c-1.849,0-3.621-0.14-5.271-0.391c-0.432,0.524-0.979,1.189-1.664,2.023c-4.448-0.653-8.223-1.915-10.765-3.548
  c1.288-0.355,2.376-0.655,3.312-0.912c-3.259-1.172-5.81-2.752-7.378-4.611c-0.028,0.213-0.052,0.426-0.052,0.642v4.456
  c0,5.282,9.788,9.581,21.817,9.581c1.519,0,2.999-0.069,4.427-0.198C25.3,56.883,23.998,54.499,23.161,51.904z M15.367,57.979
  c-4.541-0.691-8.359-2.018-10.854-3.726v-3.736c2.611,1.679,6.406,2.976,10.854,3.657V57.979z"></path>
            <path d="M44.359,22.805v-4.37c0-0.213-0.02-0.428-0.055-0.639c-1.568,1.858-4.119,3.437-7.375,4.608
   c0.863,0.237,1.877,0.518,3.043,0.84C41.393,22.958,42.859,22.805,44.359,22.805z"></path>
            <path d="M26.123,32.331c1.037-1.479,2.25-2.82,3.608-4.007v-0.846c0.454-0.069,0.897-0.151,1.341-0.232
   c0.432-0.322,0.868-0.633,1.323-0.923c-0.933,0.207-1.9,0.391-2.909,0.539c-0.682-0.831-1.229-1.495-1.661-2.02
   c-1.649,0.249-3.422,0.388-5.271,0.388c0,0-0.003,0-0.006,0c0,0-0.002,0-0.006,0c0,0,0,0-0.002,0
   c-1.849,0-3.621-0.139-5.271-0.388c-0.432,0.524-0.979,1.188-1.664,2.021c-4.448-0.653-8.223-1.914-10.765-3.546
   c1.288-0.355,2.376-0.657,3.312-0.914c-3.259-1.172-5.81-2.75-7.378-4.608c-0.028,0.211-0.052,0.426-0.052,0.639v4.456
   c0,5.283,9.788,9.58,21.817,9.58C23.761,32.471,24.954,32.417,26.123,32.331z M15.367,31.285
   c-4.541-0.693-8.359-2.018-10.854-3.728v-3.733c2.611,1.679,6.406,2.974,10.854,3.656V31.285z"></path>
          <path d="M44.359,26.166c-10.445,0-18.914,8.469-18.914,18.918C25.446,55.53,33.914,64,44.359,64
  c10.451,0,18.918-8.47,18.918-18.916C63.277,34.635,54.811,26.166,44.359,26.166z M53.428,46.976c0,0.49-0.402,0.889-0.891,0.889
  h-5.393v5.393c0,0.49-0.4,0.893-0.891,0.893h-3.789c-0.486,0-0.889-0.402-0.889-0.893v-5.393h-5.393
  c-0.488,0-0.889-0.398-0.889-0.889v-3.786c0-0.49,0.4-0.892,0.889-0.892h5.393v-5.393c0-0.489,0.402-0.886,0.889-0.886h3.789
  c0.49,0,0.891,0.396,0.891,0.886v5.393h5.393c0.488,0,0.891,0.401,0.891,0.892V46.976z"></path>
        </g>
      </symbol>
    </svg>
      <div>
        <svg class="shape-55 shape-style-1" fill="red"> 
            <use xlink:href="#shape-1"></use>
        </svg>
    </div>
    <div>
        <svg class="shape-55 shape-style-2" fill="blue"> 
            <use xlink:href="#shape-1"></use>
        </svg>
    </div>
</body>

- Paul LeBeau

---

默认颜色（红色或蓝色）通过<use>被继承。第一个<path>使用该颜色。然后，我在<g>元素中通过具体设置其余路径为黑色来覆盖它。 - Paul LeBeau