使用javascript更改SVG属性

Question

So trying to get my head around how to change a SVG using javascript (I tried d3js library. And I have some issues because I am not sure wether to use it or not).

I have created a simple icon (a star and a circle, to have something). As far as I understand, what I need to do is to change the attributes of the <g> tag. The icon have three id 's, start circle(should be the whole picture), star (which is the star) and circle Here is the SVG image.

<svg
        xmlns:dc="http://purl.org/dc/elements/1.1/"
        xmlns:cc="http://creativecommons.org/ns#"
        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
        xmlns:svg="http://www.w3.org/2000/svg"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
        xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
        width="120"
        height="120"
        viewBox="0 0 120 120"
        id="starcircle"
        version="1.1"
        inkscape:version="0.91 r13725"
        sodipodi:docname="starcircle.svg">
    <defs
            id="defstarcircle-def" />
    <sodipodi:namedview
            id="starcircle"
            pagecolor="#ffffff"
            bordercolor="#666666"
            borderopacity="1.0"
            inkscape:pageopacity="0.0"
            inkscape:pageshadow="2"
            inkscape:zoom="2.32"
            inkscape:cx="53.146552"
            inkscape:cy="47.894737"
            inkscape:document-units="px"
            inkscape:current-layer="layer1"
            showgrid="false"
            units="px"
            inkscape:window-width="1440"
            inkscape:window-height="821"
            inkscape:window-x="0"
            inkscape:window-y="1"
            inkscape:window-maximized="1" />
    <metadata
            id="metadata5539">
        <rdf:RDF>
            <cc:Work
                    rdf:about="">
                <dc:format>image/svg+xml</dc:format>
                <dc:type
                        rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
                <dc:title></dc:title>
            </cc:Work>
        </rdf:RDF>
    </metadata>
    <g
            inkscape:label="Layer 1"
            inkscape:groupmode="layer"
            id="scLayer"
            transform="translate(0,-932.36216)">
        <path
                sodipodi:type="star"
                style="opacity:0.5;fill:#00aeef;fill-opacity:1;stroke:#ffffff;stroke-opacity:1"
                id="star"
                sodipodi:sides="5"
                sodipodi:cx="59.05172"
                sodipodi:cy="992.44832"
                sodipodi:r1="49.260658"
                sodipodi:r2="24.630329"
                sodipodi:arg1="-0.27469391"
                sodipodi:arg2="0.35362463"
                inkscape:flatsided="false"
                inkscape:rounded="0"
                inkscape:randomized="0"
                d="m 106.46551,979.08623 -24.307496,21.89157 4.253455,32.4346 -28.331542,-16.3529 -29.532743,14.0681 6.79764,-31.99826 -22.505694,-23.74002 32.532715,-3.42306 15.623459,-28.74026 13.308684,29.88267 z"
                inkscape:transform-center-x="-0.60060082"
                inkscape:transform-center-y="-4.1291064" />
        <ellipse
                style="opacity:0.5;fill:#0d00ef;fill-opacity:1;stroke:#ffffff;stroke-opacity:1"
                id="circle"
                cx="58.620693"
                cy="991.80182"
                rx="16.379311"
                ry="16.594828" />
    </g>
</svg>

So lets say that I want to rotate the star, for now only rotate it 180 degrees . I would need to get the SVG image, then the shape, then append something like

rotate(180 , 50 , 50)

I tried doing it using d3, because it seemed like you needed a library to do it, but nothing I do seem to change the actual document. So what is the easiest way.

I created a jsfiddle with this example, and my attempt to do the rotate, but so far no luck.

I also hid the circle, mostly just to prove that the code is at least finding the objects, even if the hide function is a css option, and I want to do it using SVG transform

https://jsfiddle.net/qyt5o0s7/

Answer 1

Well your approach in the fiddle is wrong, Since you are not sure what the library to use or how to use it I like to give you the steps.

Use d3.js , It's great.

You just have to add a <g> , then create the star inside the <g> . Give the <g> and id of something like starGroup

<g id="starGroup"></g>

then you can use d3 to translate the group.

d3.select('#starGroup')
.style(...);

Answer 2

Your javascript code was appending a <g> element to the #star element and then rotating the #star element. Remove the append() function and your code will then rotate the #star element. If you want to rotate the #star element around its center then you will also have add tranlate operation before and after the rotate operation. For example, change...

vard3star = d3.select("#star").append("g")
.attr("transform","rotate("+10 + "," + 15 +","+ 15 +")");

to...

var d3star = d3.select("#star").attr("transform","translate(60,992) rotate(10,15,15) translate(-60,-992)");

Also note that you were missing a space between var and d3star which was resulting in a global variable called vard3star.