使用JQuery将SVG动态加载到SVGWeb中 [英] Loading SVG into SVGWeb dynamically with JQuery

问题描述

我正在尝试动态显示一些SVG内容.此内容以字符串形式存储在我的数据源中.一个示例字符串如下所示:

I am trying to dynamically display some SVG content. This content is stored as a string in my data source. An example string would look like the following:

<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动态编写"script"标签.

To accomodate for IE, I'm using SvgWeb. My problem is, to display svg content, I need to wrap it in a <script type="image/svg+xml"></script> tag combo. My challenge is, the svg is being pulled back asynchronously via JQuery. And, to my knowledge, I can't dynamically write a 'script' tag from JavaScript.

如何获取通过JQuery检索的SVG内容并动态显示呢?

How do I take the SVG content that is retrieved with JQuery and dynamically display it?

推荐答案

找到了部分答案

Found a partial answer here and reproduced below. Note, that this approach forces you to build the root <svg> tags and attributes yourself in javascript instead of just loading the whole svg document that you have in your question's example.

动态创建SVG Root元素类似于直接嵌入到网页中.您无需像直接将SVG嵌入页面加载中那样创建SCRIPT标签:

Dynamically creating an SVG Root element is similar for direct embedding into a web page. You don't have to create a SCRIPT tag like you would if you were direct embedding the SVG on page load:

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

相反，您遵循与上述类似的过程:

Instead, you follow a process similar to the above:

// 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附加到页面(这是轻微的 与标准的差异).以下是支持此操作的方法:

Must use a callback to know when SVG is appended to page (this is slight divergence from standard). The following are supported ways to do this:

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根附加到我们的文档中

Now append the SVG root to our document

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

在上面的代码中请注意，我们必须使用事件侦听器来知道SVG根何时完成加载到页面中；这与SVG Web魔术的必要标准略有不同.

Note in the above code that we have to use an event listener to know when the SVG root is finished loading into the page; this is a slight divergence from the standard necessary for SVG Web's magic.

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

The parent that you attach either your SVG root must already be attached to the real DOM on your page (i.e. it can't be disconnected from the page).

这篇关于使用JQuery将SVG动态加载到SVGWeb中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！