使用JQuery动态地将SVG加载到SVGWeb中

Question

我试图动态显示一些SVG内容.此内容作为字符串存储在我的数据源中.示例字符串如下所示:

<svg width="200" height="200" style="background-color:#D2B48C; margin-bottom:5px;" id="embeddedSVG">
<g id="myGroup" fill="blue" style="font-size:18px; text-anchor:middle; font-family: serif;">
<circle id="myCircle" cx="100" cy="75" r="50" stroke="firebrick" stroke-width="3" />
<text x="100" y="155">Hello World</text><text x="100" y="175">From Embedded SVG!</text>
</g></svg>

为了适应IE,我正在使用SvgWeb.我的问题是,要显示svg内容,我需要将其包装在<script type="image/svg+xml"></script>标记组合中.我的挑战是,svg正在通过JQuery异步撤回.而据我所知,我无法动态地从JavaScript编写"脚本"标签.

如何获取使用JQuery检索并动态显示的SVG内容？

Answer 1

在这里找到了部分答案,并在下面转载.请注意,这种方法会强制您<svg>在javascript中自己构建根标记和属性,而不是仅仅加载您在问题示例中的整个svg文档.

动态创建SVG Root元素类似于直接嵌入到网页中.您不必像在页面加载时直接嵌入SVG那样创建SCRIPT标记:

<script type="image/svg+xml">
  <svg>
    ...
  </svg>
</script>

相反,您遵循类似于上述的过程:

// create SVG root element
var svg = document.createElementNS(svgns, 'svg'); // don't need to pass in 'true'
svg.setAttribute('width', '300');
svg.setAttribute('height', '300');

// create an example circle and append it to SVG root element
var circle = document.createElementNS(svgns, 'circle');
svg.appendChild(circle);

必须使用回调来知道何时将SVG附加到页面(这与标准略有不同).以下是支持的方法:

svg.addEventListener('SVGLoad', function() {
  svg = this; // this will correctly refer to your SVG root
  alert('loaded!');
}, false);
// also supported:
svg.onsvgload = function() {
  alert('loaded!');
}

现在将SVG根添加到我们的文档中

svgweb.appendChild(svg, document.body); // note that we call svgweb.appendChild

请注意,在上面的代码中,我们必须使用事件监听器来了解SVG根目录何时完成加载到页面中; 这与SVG Web神奇所需的标准略有不同.

您附加SVG根目录的父级必须已连接到页面上的真实DOM(即,它不能与页面断开连接).