Question

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

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

有没有办法将自己的类添加到svg并在我的css中使用它

    .triangle{
        fill: red;
    }

Answer 1

如果您想在SVG中使用该课程，您将不得不做这样的事情

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您的问题是class样式的颜色被您在子fill元素上的显式<g>覆盖了。如果你删除它，你的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用类名填充

2 个答案: