将外部 svg 调用到另一个 svg

2024-04-25

我有多个内联 svgs。所有这些都有一个共同的路径+一个图像。通常这个公共部分应该定期更改。

因此,如果我将公共区域保存为单独的 svg 文件。是否可以将通用 svg 文件调用到另一个内联 svg 中?

E.g.:

main.svg

    <svg height="130" width="500">
      <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
          <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
        </linearGradient>
      </defs>
      <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
//I need to include external.svg here
    </svg>

外部.svg

<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
<image width="20" height="20" xlink:href="man.png"></image>

如果您使用<img> (or background-image),那么这些 SVG 必须是独立的。它们无法引用其他外部文件,无论是 CSS、图像、字体还是其他 SVG。

但是,如果您使用内联 SVG,它应该可以工作,<object> etc.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将外部 svg 调用到另一个 svg 的相关文章