2015-06-12 2 views
3

Я использую встроенный SVG в SVG и установил некоторые значения по умолчанию x и y. Когда я их меняю, встроенный SVG движется соответственно. Я пытаюсь изменить его с помощьюИзмените встроенный SVG x и y с помощью ecmascript

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

и что добавляет style = "x: 90px;" но это фактически не влияет на элемент. Это странно (в моей голове), потому что это работает с 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> 

+1

В SVG х, у не являются стили CSS они являются атрибутами. –

+0

@RobertLongson Я знаю, но он работал на rect. странно. –

ответ

1

Я попытался добавить важное значение для стоимости, но это не сработало. Решение непосредственно изменить атрибут х как так:

selector.setAttribute("attr",val); 
Смежные вопросы