Question

我正在教自己JavaScript和SVG为网页创建一些交互式图形，但遇到的问题是路径没有在程序生成的SVG中绘制。这是一个展示问题的测试代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<svg width="1em" height="1em" viewBox="0 0 350 350"
     preserveAspectRatio="xMidYMid meet"
     style="border: 1px solid #cc0000;">

    <path d="M 50 50 L300 50 L300 300 L50 300 Z"/>
</svg>
</body>
<script>
"use strict";
var s = document.createElementNS("http://www.w3.org/2000/svg","svg")
s.setAttribute("width","1em")
s.setAttribute("height","1em")
s.setAttribute("viewBox", "0 0 350 350")
s.setAttribute("preserveAspectRatio","xMidYMid meet")
s.setAttribute("style","border: 1px solid #cc0000;")
var g = document.createElement("path")
g.setAttribute("d",'M 50 50 L300 50 L300 300 L50 300 Z')
s.appendChild(g)
document.body.appendChild(s)
</script>
</html>

这会并排显示两个SVG，每个SVG都有一个红色边框。但是，第一个 - 从HTML生成 - 将一个黑色矩形绘制到SVG中。第二个 - 由JavaScript代码生成 - 只是不会绘制矩形。

我无法弄清楚原因。在渲染页面的DOM中检查两个SVG显示它们完全相同。然而，我尝试的每个浏览器只绘制第一个矩形。

关于这个肯定是基本错误的任何建议？

Answer 1

你使用createElementNS作为svg元素，你需要使用相同的函数来创建路径，createElement不会这样做。

var g = document.createElementNS("http://www.w3.org/2000/svg", "path")

Answer 2

使用正确的命名空间创建 svg 元素后，
您可以使用 HTML 符号添加内容

<script>
  let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("viewBox", "0 0 350 350");
  let html = `<circle cx="50%" cy="50%" r="45%" fill="red"/>` +
             `<path d='M 50 50 L300 50 L300 300 L50 300 Z'/>`;
  svg.innerHTML = html;
  document.body.append(svg);
</script>

<style>
 svg {
   height: 150px;
 }
</style>

JavaScript生成的SVG不渲染内容

2 个答案: