呼叫外部svg到另一个svg [英] Call external svg in to another svg

问题描述

我有多个内嵌svg.在所有这些中，都有一条共同的路径+一幅图像.通常，这个公共部分应该定期更改.

I've got multiple inline svgs. In all of those there is a common path + an image. Usually this common part is supposed to change regularly.

因此，如果我将公共区域另存为单独的svg文件.可以将常见的svg文件调用到另一个内联svg中吗?

So if I save the common area as a separate svg file. Is it possible to call the common svg file in to another inline svg?

例如:

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>

external.svg

external.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>(或background-image)嵌入SVG，则这些SVG必须是自包含的.它们无法引用其他外部文件，无论它们是CSS，图像，字体还是其他SVG.

If you are embedding the SVGs using an <img> (or background-image), then those SVGs must be self contained. They cannot reference other external files whether they be CSS, images, fonts or other SVGs.

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

However it should work if you use inlined SVGs, <object> etc.

这篇关于呼叫外部svg到另一个svg的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！