Question

我在javascript中设置SVG图像的宽度和高度，但它不起作用。我的代码是这样的：

var url = "https://dl.dropboxusercontent.com/u/74728667/left_arrow.svg";
var main = document.getElementById("main");
var xhr = new XMLHttpRequest();
        xhr.open('get', url, true);
        xhr.onreadystatechange = function(ev)
        {
            if (xhr.readyState === 4)
            {
                if (xhr.status === 200)
                {
                     var e = xhr.responseXML.documentElement;
                var svg = document.importNode(e, true); 
                svg.setAttribute("width", "28px");
                svg.setAttribute("height", "28px");
            svg.style.border="1px solid black";
            svg.style.position="absolute";
            svg.style.left="50px";
            svg.style.top="50px";
            main.appendChild(svg);
                }
                else
                {
                    alert("request failed");
                }
            }           
        };
        xhr.send();

上面的代码产生如下结果：

enter image description here

请注意，SVG未调整为指定的宽度和高度。 我该如何解决这个问题？。我尝试过使用svg.setAttributeNS(null, "width", "28px");

我检查了上面代码生成的html，如果我将其复制粘贴到单独的fiddle中，我就明白了：

HTML：

<div id="main" style="position:relative"><svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 18 18" width="28px" height="28px" style="border: 1px solid black; position: absolute; left: 50px; top: 50px;">
    <path fill="#a00" fill-opacity="1" stroke="none" d="M 0,9 l 17,9 -6,-9 6,-9 Z" onmouseover="evt.target.setAttribute('fill', '#ac0');" onmouseout="evt.target.setAttribute('fill','#a00');"></path>
</svg></div>

输出：

enter image description here

如何让我的js代码产生与上面相同的结果？

Answer 1

此问题是由源svg文件中的视图“b”ox的拼写错误引起的 Web浏览器不将视图“b”ox属性视为视图“B”ox属性，因为独立的svg文件是xml文件。
因此，您应该像这样纠正svg源。

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 18 18"
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"

但是这些属性在html中的内联svg中被视为相同。
此行为由HTML解析规则定义，请参阅此 http://www.whatwg.org/specs/web-apps/current-work/multipage/syntax.html#creating-and-inserting-nodes

如何在javascript中正确设置SVG的宽度和高度？

1 个答案: