Question

我在SVG中使用内联SVG并设置了一些默认的x和y值。当我更改它们时，内联SVG会相应地移动。我想用

来改变它

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

并添加了style =＆＃34; x：90px;＆＃34;但这并不会影响元素。这很奇怪（在我脑海中），因为它适用于 rect ，但不适用于 svg 。这是我的实际代码：

<?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>

Answer 1

我尝试添加！重要的值，但它没有用（因为我猜它不算作有效数字？）。解决方案是直接更改x属性，如下所示：

selector.setAttribute("attr",val);

使用ecmascript更改内联SVG的x和y

1 个答案: