CSS

Question

我这里有一个 jsfiddle - http://jsfiddle.net/morettmt/v7mx737w/2/

我可以通过设置分组样式来更改填充颜色

有没有办法将我自己的 class 添加到 svg 并在我的 css

中使用它

    .triangle{
        fill: red;
    }

Answer 1

如果你想在 SVG 中使用 class，你必须这样做

.play-triangle>g {
  fill: red;
}

<svg class="play-triangle" width="100px" height="107px" viewBox="0 0 10 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
  <g id="Guide" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
    <g id="Iconography" sketch:type="MSArtboardGroup" transform="translate(-421.000000, -286.000000)">
      <path d="M421.002864,301.137442 C421.001935,301.394293 421.098144,301.651636 421.293405,301.846897 C421.686652,302.240144 422.317878,302.236638 422.709368,301.845148 L429.778687,294.775829 L430.485793,294.068722 L422.709368,286.292297 C422.322784,285.905713 421.68393,285.900024 421.293405,286.290548 C421.086336,286.497617 420.989274,286.77067 421.000938,287.039961 C421.000655,287.049803 421.000512,287.059682 421.000512,287.069594 L421.000512,301.067851 C421.000512,301.091254 421.001305,301.114459 421.002864,301.137442 L421.002864,301.137442 L421.002864,301.137442 Z"
        id="Rectangle-78" sketch:type="MSShapeGroup"></path>
    </g>
  </g>
</svg>

Answer 2

您的问题是 class 样式中的颜色被子 <g> 元素上的显式 fill 覆盖。如果你删除它，你的 CSS 就可以了。

.triangle{
 fill: red;
}

<svg width="100px" height="107px" viewBox="0 0 10 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
     
     <g class="triangle" id="Guide" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
         <g id="Iconography" sketch:type="MSArtboardGroup" transform="translate(-421.000000, -286.000000)">
             <path d="M421.002864,301.137442 C421.001935,301.394293 421.098144,301.651636 421.293405,301.846897 C421.686652,302.240144 422.317878,302.236638 422.709368,301.845148 L429.778687,294.775829 L430.485793,294.068722 L422.709368,286.292297 C422.322784,285.905713 421.68393,285.900024 421.293405,286.290548 C421.086336,286.497617 420.989274,286.77067 421.000938,287.039961 C421.000655,287.049803 421.000512,287.059682 421.000512,287.069594 L421.000512,301.067851 C421.000512,301.091254 421.001305,301.114459 421.002864,301.137442 L421.002864,301.137442 L421.002864,301.137442 Z" id="Rectangle-78" sketch:type="MSShapeGroup"></path>
         </g>
     </g>
 </svg>

CSS - 样式 svg 填充 class 名称

CSS - Style svg fill with class name

svg

fill