如何在javascript中设置svg中的子属性的颜色?

时间:2013-05-07 18:38:11

标签: javascript css svg

维基百科中有地图。 http://en.wikipedia.org/wiki/Wikipedia:Blank_maps

如何在javascript中设置id的子元素(路径)的颜色?

<g id="UGA">
<path d="M33.903 -1.002L33.794 -1.002L33.616 -1.002L33.439 -1.002L33.261 -1.002L33.083 -1.002L32.905 -1.002L32.727 -1.002L32.55 -1.002L32.372 -1.002L32.194 -1.002L32.016 -1.002L31.839 -1.002L31.661 -1.002L31.483 -1.002L31.305 -1.002L31.128 -1.002L30.95 -1.002L30.845 -1.002L30.824 -0.999L30.809 -0.995L30.742 -1.008L30.673 -1.051L30.599 -1.07L30.52 -1.063L30.51 -1.067L30.47 -1.066L30.412 -1.063L30.36 -1.075L30.321 -1.113L30.28 -1.179L30.207 -1.254L30.15 -1.321L30.102 -1.369L29.991 -1.447L29.93 -1.47L29.9 -1.466L29.882 -1.452L29.847 -1.352L29.825 -1.336L29.61 -1.387L29.577 -1.388L29.58 -1.357L29.564 -1.121L29.562 -0.977L29.59 -0.887L29.606 -0.783L29.608 -0.691L29.648 -0.535L29.633 -0.442L29.684 -0.114L29.698 -0.06L29.718 0.098L29.75 0.147L29.778 0.166L29.815 0.264L29.885 0.419L29.934 0.499L29.924 0.674L29.932 0.793L29.943 0.819L30.047 0.864L30.183 0.973L30.24 1.103L30.321 1.185L30.478 1.239L30.478 1.239L30.943 1.683L31.159 1.922L31.253 2.045L31.256 2.089L31.274 2.146L31.236 2.191L31.191 2.232L31.176 2.27L31.138 2.289L31.082 2.288L31.045 2.316L31.004 2.369L30.962 2.403L30.83 2.4L30.729 2.455L30.73 2.53L30.77 2.678L30.847 2.847L30.851 2.894L30.84 2.934L30.821 2.968L30.786 3.001L30.754 3.042L30.779 3.163L30.828 3.283L30.868 3.342L30.906 3.409L30.895 3.464L30.839 3.491L30.868 3.544L30.929 3.634L31.048 3.725L31.152 3.786L31.222 3.786L31.357 3.738L31.48 3.68L31.547 3.678L31.629 3.701L31.798 3.803L31.839 3.77L31.888 3.709L31.942 3.608L32.048 3.561L32.099 3.529L32.136 3.52L32.156 3.528L32.197 3.608L32.246 3.651L32.336 3.706L32.535 3.75L32.677 3.763L32.737 3.773L32.838 3.798L32.997 3.88L33.154 3.775L33.324 3.754L33.489 3.755L33.54 3.787L33.568 3.812L33.742 3.985L33.976 4.22L34.132 3.889L34.186 3.87L34.178 3.841L34.165 3.813L34.267 3.733L34.393 3.692L34.438 3.651L34.442 3.606L34.399 3.413L34.407 3.358L34.448 3.163L34.523 3.12L34.589 2.925L34.723 2.842L34.742 2.818L34.773 2.723L34.814 2.62L34.847 2.596L34.866 2.59L34.906 2.48L34.883 2.418L34.914 2.23L34.964 2.062L34.978 1.862L34.978 1.774L34.976 1.72L34.965 1.643L34.941 1.599L34.898 1.556L34.851 1.489L34.81 1.417L34.784 1.381L34.804 1.273L34.799 1.245L34.788 1.231L34.727 1.214L34.649 1.185L34.602 1.156L34.535 1.102L34.482 1.042L34.411 0.867L34.293 0.731L34.273 0.686L34.161 0.605L34.112 0.505L34.081 0.382L34.037 0.295L33.943 0.174L33.922 -0.017L33.924 -0.398L33.9 -0.832L33.903 -1.002Z" style="opacity:1;fill:#444444;fill-opacity:1;fill-rule:evenodd;stroke:none;" />

</g>

2 个答案:

答案 0 :(得分:1)

使用CSS很容易:

#UGA path {
  fill: red;
}

答案 1 :(得分:0)

看一下这个例子&#34; button style&#34;在janvas

janvas.com