WebKit策略:可用于绘制svg中的html标签,但与搭配不生效

  在<svg>里面可以利用<foreignObject>绘制html标签,原本是我在iconfont采用Font class方式引入svg的无奈之举。

  起初的设计是所有icon先在<defs>中先渲染,以达到icon复用的效果,icon采用Symbol方式引入svg感觉也是比较合适的,比较规范的。

<template>
  <defs>
    <g v-for="item in list" :key="item._id" :id="'icon-' + item._id">
      <svg aria-hidden="true" width="16" height="16" x="0" y="0">
        <use :xlink:href="'#' + item.icon"></use>
      </svg>
    </g>
  </defs>
</template>

<script>
export default {
  data() {
    return {
      list: [],
    };
  },
};
</script>

  然后再需要用到的地方用<use :xlink:href=”‘#icon-‘ + id” />克隆下来,感觉很完美。

  但是理想很丰满,现实很骨感。由于某些功能会被影响到,不能使用Symbol方式引入,最后只能选择Font class引入svg。于是代码变为了下列

<template>
  <defs>
    <g v-for="item in list" :key="item._id" :id="'icon-' + item._id">
      <foreignObject width="16" height="16" x="16" y="16">
        <div xmlns="http://www.w3.org/1999/xhtml">
          <span class="iconfont" :class="item.icon"></span>
        </div>
      </foreignObject>
    </g>
  </defs>
</template>

<script>
export default {
  data() {
    return {
      list: [],
    };
  },
};
</script>

  但是在需要的地方使用<use :xlink:href=”‘#icon-‘ + id” />克隆下来,会发现在谷歌浏览器上却完全显示不出<span>标签的内容,即不显示iconfont图标。

  刚开始,我以为是不能在<defs>标签中使用<foreignObject>标签,于是我就去查看了SVG规范,传送门:https://www.w3.org/TR/SVG/struct.html#DefsElement,SVG规范是支持这种写法的。打开F12,查看<defs>标签下的dom结构,也可以看到<foreignObject>标签其实是有生成的,也是佐证了这一点。

《WebKit策略:<foreignObject>可用于绘制svg中的html标签,但与<use>搭配不生效》” /></p><p>  但是查看引用<use>标签的地方,就没有生成对应的<foreignObject>标签,我查看SVG规范文档并没有提到<use>标签不能与<foreignObject>标签共同使用的限制。最后我打开了github,在w3c的【SVG工作组规范】项目下寻找答案,传送门:https://github.com/w3c/svgwg,最后找到了一个讨论:https://github.com/w3c/svgwg/issues/511。这位程序员在讨论中说除了 Gecko 之外的所有浏览器都限制<svg:use>元素中的<foreignObject>,他在思考为什么Gecko之类的浏览器允许这么做。</p><p><img layer-src=

  虽然不够优雅,但是真香。

  事情原本到这就应该结束了,但是我还是不死心,不知道为什么WebKit要做这样的一个策略。最后,功夫不负有心人,我在Bugzilla又找到了一个提交给WebKit的bug:https://bugs.webkit.org/show_bug.cgi?id=91515。底下有一名名为Nikolas Zimmermann的程序员对此进行了回应:

《WebKit策略:<foreignObject>可用于绘制svg中的html标签,但与<use>搭配不生效》” /></p><p>   原文大意是:</p><p>    是的。由于与foreignObject相关的潜在问题,我们故意禁止它。它需要经过充分测试,仅此而已。</p><p>    当启用它时,我们需要注意新类型的循环引用,这就是它变得棘手的地方。</p><p>    foo.svg,包含 <symbol id=”symbol”><foreignObject> <iframe src=”other.html”/></foreignObject></symbol><br />    blub.svg 引用”symbol”。other.html包含foo.svg作为html:img。… -> 循环</p><p>    或者考虑<foreignObject>包含<div style=”background-image: blub.svg” 的情况…</p><p>    我们基本上需要将循环检测扩展到所有可以引用其他文件的 HTML 元素/属性。<br />    如果您感到有挑战,请随时开始,否则我将不实施解决这个问题。</p><p>  不过这个bug之后在2020年被其他人重新提起,于是,应该是Nikolas Zimmermann的同事Said Abou-Hallawa在底下也对这个bug进行了补充评论。<img layer-src=     原文作者:他好像一条狗啊
    原文地址: https://www.cnblogs.com/jdWu-d/p/16784807.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。

点赞