Change inline SVG x and y with ecmascript

I am using inline SVG in SVG and 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 adds style = "x: 90px;" but that doesn't actually affect the element. This is weird (in my head) because it works with rect , but not 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>

      

+3


source to share


1 answer


I tried adding an important value, but it didn't work (because I think it doesn't count as its valid number?). The solution is to directly change the x attribute like this:



selector.setAttribute("attr",val); 

      

+1


source







All Articles