3
인라인 스타일 태그를 사용하여 45 개의 다각형과 5 개의 사각형을 스타일 화하려고합니다. 어떤 이유로 스타일을 지정하려고하는 첫 번째 태그가 스타일을 선택하지 않습니다. 맨 위에 세 번째 셰이프를 추가하면 스타일 아래에있는 두 개의 셰이프가 추가됩니다. 세 번째 셰이프를 맨 위에 놓으면 두 번째 셰이프는 스타일이 적용되지 않습니다. 전에 이런 일이 있었습니까?CSS를 사용하여 어떻게 svg 태그를 스타일링합니까?
이제 아래 코드를 사용하여 사각형에 스타일이 적용됩니다.
<style type="text/css"><![CDATA[
polygon{
fill:none;
stroke:black;
stroke-width:.5;
}
rect{
fill:none;
stroke:black;
stroke-width:.5;
}
polygon{
fill:none;
stroke:black;
stroke-width:.5;
}
]]></style>
<svg width="400" height="800" viewBox="0 0 400 800" id="svg-doc">
<rect id="central-park" class="shape" x="154" y="370"width="53" height="127" />
<rect id="shape-z10024" class="shape" x="68" y="415" width="85" height="40" />
<rect id="shape-z10023" class="shape" x="68" y="457" width="85" height="40" />
<polygon id="shape-z10034" class="shape" points="189,156 137,122 106,121 101,129 99,155 79,155 78,105 94,79 121,67 128,82 163,61 177,62 191,80" />
<a xlink:href="http://google.com/">
<polygon id="shape-z10040" class="shape" points="188,167 186,155 137,122 108,122 102,126 100,153 77,156 77,166" />
</a>
<polygon id="shape-z10033" class="shape" points="189,166 187,197 187,203 81,203 77,194 78,166" />
<polygon id="shape-z10032" class="shape" points="189,205 160,234 155,248 84,247 80,204" />
<polygon id="shape-z10030" class="shape" points="268,311 196,315 197,299 157,298 157,273 234,273" />
</svg>
당신이 [jsfiddle] (HTTP를 설정할 수 있습니다 : //jsfiddle.net/) 이것에 대해? – miah
왜 '