主页 / 问题 / 800864
Accepted
Дмитрий Полянин
Asked:2020-03-18 17:57:40 +0000 UTC2020-03-18 17:57:40 +0000 UTC

为什么不能通过 JavaScript 向 SVG 添加元素？

  • 772

有一个脚本，它给SVG添加了一个圆圈，这个圆圈是添加到HTML标记本身的，你可以通过调试器查看，但是我的浏览器中没有显示这个圆圈。也就是说，HTML 已更新，但未绘制添加的元素。

同时，生成的 SVG 本身是有效的，您可以通过从调试器中复制来检查这一点。更简单的是，你可以直接在调试器中检查，点击编辑HTML并在SVG前加一个空格，例如，保存，圆圈立即出现。

为什么会这样以及如何解决？

var svg = document.getElementById("svg1");

var circle = document.createElement("circle");

circle.setAttribute("cx", 110);
circle.setAttribute("cy", 20);
circle.setAttribute("r", 50);
circle.setAttribute("fill", "green");

svg.appendChild(circle);
<svg id="svg1" style="width:400px; height:150px; background-color: pink;">
  <rect x="20" y="20" width="100" height="60" fill="blue" />
</svg>

javascript

1 个回答

  1. Best Answer

    浏览器在不断改进。如果早些时候有必要namespace为 svg 代码声明：
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"，

    现在你不能这样做，它会起作用，但并不总是正确的。
    例如，如果你写viewbox而不是正确的拼写 - “view Box ”，那么解析器不会给出错误消息，因为HTML在哪种情况下写字母并不重要。但是 svg 区分大小写，并且该命令不起作用。因此，最好始终指定namespace.
    还有Javascript用于创建对象的命令对于有保证的跨浏览器解决方案SVG ，使用命令而不是命令总是更好。setAttributesetAttributeNS

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="400">
  <script type="text/ecmascript"><![CDATA[
    var svgNS = "http://www.w3.org/2000/svg";
    var xlinkNS = "http://www.w3.org/1999/xlink";
    function createCircle() {
      var newCircle = document.createElementNS(svgNS,"circle");
      newCircle.setAttributeNS(null,"cx",Math.random() * 100+250);	
      newCircle.setAttributeNS(null,"cy",Math.random() * 100+100);		
      newCircle.setAttributeNS(null,"r",Math.random() * 100);		
      newCircle.setAttributeNS(null,"stroke",Math.random() * 100);	
      newCircle.setAttributeNS(null,"fill-opacity",Math.random());		
      var red = Math.round(Math.random() * 255);
      var green = Math.round(Math.random() * 255);
      var blue = Math.round(Math.random() * 255);
      newCircle.setAttributeNS(null,"fill","rgb("+ red +","+ green+","+blue+")");
      document.getElementById("firstCircle").appendChild(newCircle);
    }	
     
  ]]></script>
    <g id="firstCircle" onclick="createCircle()"> 
  <rect x="50" y="20" width="150" height="30" rx="10" fill="yellowgreen"  />
    <text x="64" y="40" fill="purple"  font-size="16px">Create a new circle.</text>
     </g>
</svg>

    • 5

相关问题