CODEWITHSUNDEEP
javascriptcsssvg
Иван Божков
Иван Божков

Reputation: 264

Change an inline SVG's x and y with ecmascript

I am using an inline SVG in an SVG and have set some default x and y values. When I change them, the inline SVG moves accordingly. I am trying to change it with 

    var inlineSVG = document.getElementById("inlineSVG");
    inlineSVG.style.x = "90";

and that adds style="x:90px;" but that doesn't actually affect the element. It's weird (in my head) because this works with a rect but not with an svg. Here is my actual code:

<?xml version='1.0' encoding='UTF-8'?> 
<svg width='1000' height='360'
 xmlns='http://www.w3.org/2000/svg'
 xmlns:xlink="http://www.w3.org/1999/xlink"
 onload='init(evt)'
 > 

<script type='text/ecmascript'>
function init(event){
    var wing1 = document.getElementById("wing1");
    wing1.style.x = "90";
}
</script> 


<circle cx="200" cy="140" r="5" fill="red" />
<circle cx="220" cy="170" r="5" fill="red" />
<circle cx="180" cy="170" r="5" fill="red" />
<circle cx="220" cy="220" r="5" fill="red" />
<circle cx="180" cy="220" r="5" fill="red" />

<svg id="wing1" x="280" y="100" viewBox="0 0 350 300">
  <g>
    <g>
      <g>
        <ellipse fill="#E6E7E8" cx="229.505" cy="117.813" rx="5.862" ry="4.547"/>
      </g>
      <g>
        <ellipse fill="#E6E7E8" cx="265.931" cy="117.819" rx="5.862" ry="4.547"/>
      </g>
    </g>
    <g>
      <g>
        <ellipse fill="#E6E7E8" cx="229.191" cy="125.538" rx="5.862" ry="4.547"/>
      </g>
      <g>
        <ellipse fill="#E6E7E8" cx="265.617" cy="125.531" rx="5.861" ry="4.547"/>
      </g>
    </g>
  </g>
  <ellipse fill="#E6E7E8" cx="247.244" cy="121.796" rx="20.635" ry="38.017"/>      
</svg>

<rect id="square" x="0" y="470" width="50" height="50" fill="#BADA55" style="fill-opacity : 0.5" />

<line x1="0" y1="0" x2="1000" y2="360" style="stroke: yellowgreen;
                                                               stroke-width: 1;
                                                               stroke-dasharray: 10 1;"></line>
<line x1="0" y1="360" x2="1000" y2="0" style="stroke: yellowgreen;
                                                               stroke-width: 1;
                                                               stroke-dasharray: 10 1;"></line>

Upvotes: 3

Views: 126

Answers (1)

Иван Божков
Иван Божков

Reputation: 264

I tried adding !important to the value but it didn't work ( because I guess it doesn't count it as a valid number? ). The solution is to directly change the x attribute like so:

selector.setAttribute("attr",val);

Upvotes: 1

Related Questions