html – iframe中的SVG有奇怪的不一致问题

概述我需要在iframe中渲染一些SVG,我需要使用srcdoc属性来完成它.出于某种原因,我正在做的事情导致SVG的某些属性无法正常显示. 在下面的屏幕截图中,iframe中的代码是相同的. 这是重现这个的代码： <svg height="150" width="300"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100 我需要在iframe中渲染一些SVG,我需要使用srcdoc属性来完成它.出于某种原因,我正在做的事情导致SVG的某些属性无法正常显示.

在下面的屏幕截图中,iframe中的代码是相同的.

这是重现这个的代码：

<svg height="150" wIDth="300">  <defs>    <linearGradIEnt ID="grad1" x1="0%" y1="0%" x2="100%" y2="0%">      <stop offset="0%"  />      <stop offset="100%"  />    </linearGradIEnt>  </defs>  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" /></svg><br><br><iframe wIDth="300" height="150" srcdoc='<svg height="150" wIDth="300">  <defs>    <linearGradIEnt ID="grad1" x1="0%" y1="0%" x2="100%" y2="0%">      <stop offset="0%"  />    </linearGradIEnt>  </defs>  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" /></svg>'></iframe>

看起来它与linearGradIEnts或url有关,以及它们在这种情况下的行为方式.

我最近在iframes和srcdocs上遇到了一些其他问题,我在SO上发布了这个问题,得到了很好的回应：iframes rendering mysteriously differently from regular web pages? – 这有很多不一致的地方,但似乎并没有特别相关.

我正在使用Chrome / Webkit.

解决方法 这似乎是iframe srcdoc文档如何解析内部目标链接的不幸结果.

使用srcdoc are supposed to be given创建的文档特殊基本URL：srcdoc.

但是,在该文档中,the base URL for resolving external links or stylesheets is the parent document’s URL.这可能意味着应该在父DOM而不是本地DOM中解析ID.但这显然没有发生,因为在您的原始示例中,父文档中存在具有该ID的有效渐变.现在,这可能是跨源限制阻止来自单独文档的资源的结果,但我没有在控制台上收到相应的错误.

当您开始将目标片段用于其他事情时,事情变得非常糟糕(并且跨浏览器不一致).

In this fiddle,转载为下面的片段,我用目标片段来

>参考两个文档的渐变(一个用于笔划,一个用于填充;在Chrome(v38)或firefox(v33)中都没有运气(IE根本不支持srcdoc).
>重复使用两个文件中的元素;既不< use>在FF渲染中,Chrome渲染本地椭圆重复使用,表示在这种情况下它根据本地文档解析片段.
>定义超链接的目标.在这种情况下,FF给我一个POST错误,但Chrome成功导航到父文档中的目标(请注意：目标样式应用).当然,这仅在父文档具有可导航URL(即,保存的Js小提琴,但不是堆栈片段)时才有效.

所有这些都是说,这是规范中的模糊性和实现中的不一致性的绝对混乱,我建议找一个替代方案,例如使用数据URI作为iframe的src.请注意,这仍然不适用于IE(不支持iframe的数据URI),并且您需要对文档中的任何#和％字符进行URL编码.

iframe srcdoc和URL片段测试用例

ellipse:target {    stroke:red;}

<svg height="150" wIDth="300">  <defs>    <linearGradIEnt ID="grad1" >      <stop offset="0"  />      <stop offset="1"  />    </linearGradIEnt>  </defs>  <ellipse ID="parentEllipse" cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" /></svg><br><br><iframe wIDth="300" height="150" srcdoc='<svg height="150" wIDth="300">  <defs>    <linearGradIEnt ID="grad2" >      <stop offset="0"  />    </linearGradIEnt>  </defs><a xlink:href="#parentEllipse">  <ellipse ID="ellipse" cx="100" cy="70" rx="85" ry="55" fill="url(#grad1) blue"  stroke="url(#grad2) green" stroke-wIDth="10px" /></a>  <use xlink:href="#ellipse" y="50"/>  <use xlink:href="#parentEllipse" x="50" /></svg>'></iframe>

总结

以上是内存溢出为你收集整理的html – iframe中的SVG有奇怪的不一致问题全部内容，希望文章能够帮你解决html – iframe中的SVG有奇怪的不一致问题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。