javascript - 使用 SVG DOM 创建比例变换

Question

我尝试上面的代码并得到:

未捕获类型错误:无法读取未定义的属性“setScale”

我知道问题是由于将类型比例归因于我的转换而引起的。 有什么想法吗？

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