使用带有外部定义的 SVG

Question

假设我有一个 SVG 文件。它引用了一个外部 CSS 样式表以及一个外部 SVG 文件。这是一个缩短的版本。

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="svg.css"?>
<svg version="1.0" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <use xlink:href="defs.svg#myDefs" />
   <g>
      <path class="someClass" d="all the points" />
   </g>
</svg>

外部 CSS 文件提供了一些样式：

.someClass {
   fill: url(#someGradient);
}

外部引用的 SVG 文件提供了所需的定义。

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">  
   <defs id="myDefs">
      <linearGradient id="someGradient" x1="100%" y1="0%" x2="0%" y2="0%">
         <stop offset="10%" style="stop-color: red;" />
         <stop offset="50%" style="stop-color: white;" />
      </linearGradient>
   </defs>
</svg>

最后，SVG 文件以允许与其他文件交互的方式加载到 DOM 中。

<object data="someFile.svg" type="image/svg+xml"></object>

在 Edge/Chrome 的网络检查器中，我可以看到所有文件都由浏览器加载，包括 SVG、引用的外部 CSS 文件和引用的包含定义的外部 SVG 文件。但我没有让它正常工作。当我使用<defs> 并将它们移动到正在显示的 SVG 文件中时，一切正常。这告诉我 CSS 文件正在正确加载并且正在工作。 <defs> 文件不是。

是否可以不为该 SVG 中的特定图像加载另一个 SVG，而仅为其中包含的定义加载？我已经尝试将渐变名称放在use 链接中，并像我在这里所做的那样为<defs> 提供一个ID。

我为什么要这样做？因为我有几十个交互式 SVG 文件。当用户在屏幕上做某些事情时，他们会得到不同的渐变。目前我必须将这些渐变的定义嵌入到所有 svg 文件中，这使得更改定义变得困难。我想在一个地方做这件事。我想一个可能的选择是将所有 SVG 组合成一个网络重的大文件，然后与对象交互以隐藏和显示它们。如果可能的话，我更喜欢这种方法。

Answer 1

你引用渐变的方式，它不起作用。您首先在 <use> 元素中引用 <defs> 元素，然后期望通过其 ID 在其中找到内容。

<use> 元素引用的所有内容都不是父 DOM 的直接部分，而只是封装的影子 DOM 的一部分。在其中定义的 ID 在其外部仍然不可见。

相反，没有什么可以阻止您直接引用外部渐变，如下所示：

.someClass {
   fill: url(defs.svg#someGradient);
}