title: Changing the SVG attributes with javascript
body: <p>So trying to get my head around how to change a <code>SVG</code> using javascript (I tried <code>d3js</code> library. And I have some issues because I am not sure wether to use it or not).</p>
  
  <p>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 <code>&lt;g&gt;</code> tag. 
  The icon have three <code>id</code>'s, start circle(should be the whole picture), <code>star</code> (which is the star) and <code>circle</code>
  Here is the <code>SVG</code> image.</p>
  
  <pre><code>&lt;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"&gt;
      &lt;defs
              id="defstarcircle-def" /&gt;
      &lt;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" /&gt;
      &lt;metadata
              id="metadata5539"&gt;
          &lt;rdf:RDF&gt;
              &lt;cc:Work
                      rdf:about=""&gt;
                  &lt;dc:format&gt;image/svg+xml&lt;/dc:format&gt;
                  &lt;dc:type
                          rdf:resource="http://purl.org/dc/dcmitype/StillImage" /&gt;
                  &lt;dc:title&gt;&lt;/dc:title&gt;
              &lt;/cc:Work&gt;
          &lt;/rdf:RDF&gt;
      &lt;/metadata&gt;
      &lt;g
              inkscape:label="Layer 1"
              inkscape:groupmode="layer"
              id="scLayer"
              transform="translate(0,-932.36216)"&gt;
          &lt;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" /&gt;
          &lt;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" /&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>So lets say that I want to rotate the star, for now only rotate it <code>180</code> <code>degrees</code>.
  I would need to get the SVG image, then the shape, then append something like</p>
  
  <pre><code>rotate(180 , 50 , 50)
  </code></pre>
  
  <p>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. </p>
  
  <p>I created a jsfiddle with this example, and my attempt to do the rotate, but so far no luck.</p>
  
  <p>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</p>
  
  <p><a href="https://jsfiddle.net/qyt5o0s7/" rel="nofollow">https://jsfiddle.net/qyt5o0s7/</a></p>