Question

我尝试上面的代码并获得：

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg id= "test" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <script><![CDATA[ var test=document.getElementById("test"); var svgns = test.namespaceURI; var doc = document; onload=function init(){ var t=doc.createElementNS(svgns,"rect"); t.setAttribute("x",0); t.setAttribute("y",0); t.setAttribute("width",100); t.setAttribute("height",200); alert(t.width.baseVal.value); var Redimmensionnement=doc.createElementNS(svgns,"transform"); Redimmensionnement.setAttribute("type",3).setScale(.75,1.2); t.setAttribute("transform",Redimmensionnement); alert(t.width.baseVal.value); } ]]> </script> </svg>

据我所知，问题从归因型规模扩展到我的转型。有什么想法吗？

user_id

Answer 1

我认为你真正想要的是这样的。请注意，您使用createSVGTransform创建变换对象，而不是createElementNS。

＆＃13;

    var test=document.getElementById("test");
    var svgns = test.namespaceURI;
    var doc = document;

    onload=function init(){

    var t=doc.createElementNS(svgns,"rect");
    t.setAttribute("x",0);
    t.setAttribute("y",0);
    t.setAttribute("width",100);
    t.setAttribute("height",200);

    var Redimmensionnement=test.createSVGTransform(); 
    Redimmensionnement.setScale(.75,1.2);
    t.transform.baseVal.initialize(Redimmensionnement);
    alert(t.getAttribute("transform"));
}

＆＃13;

html, body, svg {
  width: 100%;
  height: 100%;
}

＆＃13;

<svg id="test" onload="init()"></svg>

＆＃13;

使用SVG DOM创建缩放变换

1 个答案: