使用SVG DOM创建比例转换

Question

我尝试以上代码并获取：

Uncaught TypeError: Cannot read property 'setScale' of undefined

我知道，问题从归因类型量表到我的变换。有什么想法吗？

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

Answer 1

我认为您真正想要的就是这样。请注意，您使用CreateSvgtransform而不是CreateElementns创建一个转换对象。

    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"));
}
 

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

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