Question

我看了其他答案。有人说这是不可能的，但后来的评论说现在是了。我通过Javascript向SVG元素添加了一些元素。但是，即使我看到它们已添加到DOM中，它们也不会出现在屏幕上。示例代码：

$(document).ready(function() {
  var html = '<line x1="250" y1="240" x2="250" y2="270" style="stroke:rgb(255,0,0);stroke-width:2" />';
  $("#map").append(html);
});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>

<h1>My drawing:</h1>
<svg height="440" width="440" id="map">
   <defs>
      <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
         <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:0"></stop>
         <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"></stop>
      </radialGradient>
   </defs>
   <ellipse cx="220" cy="200" rx="200" ry="100" style="fill:none;stroke:purple;stroke-width:2" />
   <ellipse style="fill:black;stroke:purple;stroke-width:2" cy="200" cx="220" ry="20" rx="10"></ellipse>
</svg>

如果我在创建页面时将<line>元素作为静态HTML呈现，则它将呈现。页面加载后通过Javascript将其添加，但不会显示。我在做错什么或如何导致图形重新渲染？

我发现Edge列出了一些错误，这些错误说SVG没有更新已关闭的SVG，因此可以肯定吗？我也在Firefox中尝试过，同样的结果。

编辑：凭直觉，我尝试通过Javascript添加一个全新的SVG元素，而不是编辑现有元素，然后将其呈现。

在DOM中更改时，SVG不会在屏幕上更新

0 个答案: