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

debugcn 发表于 Dev

语素

我在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();

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

在此处输入图片说明

请注意，SVG不会调整为指定的宽度和高度。我怎样才能解决这个问题？。我尝试使用svg.setAttributeNS(null, "width", "28px");

我检查了上面的代码生成的结果html，如果我将其复制粘贴到单独的小提琴中，则会得到以下信息：

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>

输出：

在此处输入图片说明

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

defghi1977

此问题是由源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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。