CSS - 樣式SVG填充類名

Question

我這裏有一個的jsfiddle - http://jsfiddle.net/morettmt/v7mx737w/2/

我可以通過造型分組

chnage填充顏色有沒有辦法我自己的類添加到SVG和使用在我的CSS

.triangle{ 
     fill: red; 
    } 

Answer 1

如果你想擁有在SVG類，你必須做這樣的事情

HTML：

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

CSS：

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

Answer 2

你的問題是，從class風格的顏色，正被明確fill你有孩子<g>元素超過纏身。如果你刪除它，你的CSS就可以工作。

.triangle{ 
 
\t 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"> 
 
\t  
 
\t  <g class="triangle" id="Guide" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"> 
 
\t   <g id="Iconography" sketch:type="MSArtboardGroup" transform="translate(-421.000000, -286.000000)"> 
 
\t    <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> 
 
\t   </g> 
 
\t  </g> 
 
\t </svg>