如何从其他内联SVG元素引用radialGradient? [英] How can I reference a radialGradient from a different inline SVG element?

问题描述

我正在使用SVG构建图标解决方案，其中部分图标需要可重复使用. HTML文档中内联了几个不同的<svg />元素，并且<use />元素非常适合重复使用形状– rect，路径等，即使在svg元素之间也是如此.

但是，重用其他定义(例如<radialGradient />)对我不起作用.在同一<svg />元素中的<defs />元素中定义了渐变时，它按预期方式工作，但在另一个<svg />元素中定义了渐变时，则不起作用.

伪代码

<!-- Near the top of my BODY element -->
<!-- This is where I keep the SVG stuff I want to reuse -->
<svg id="for-reuse" style="display:none">
  <defs>
    <path id="marker" d="M63 127L49 93C44 80 52 69 63 69L64 69C75 69 83 80 78 93L64 127" />
    <radialGradient id="shadow">
      <stop offset="10%" stop-color="rgba(0,0,0,0.4)" />
      <stop offset="90%" stop-color="rgba(0,0,0,0)" />
    </radialGradient>
  </defs>
</svg>

<!-- Further down the html document -->
<svg viewBox="0 0 128 128" style="width:64px; height:64px" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <!-- This use element works fine! -->
  <use xlink:href="#marker" style="fill:black" />

  <!-- But this fill attribute does not! -->
  <rect x="5" y="5" width="20" height="20" fill="url(#shadow)" />
</svg>

为什么可以从其他svg元素中形成use形状，但不能像这样的属性值?当我将shadow渐变移到可见svg元素内的defs元素中时，引用可以正常工作.

这是一个JSFiddle，它说明了正常工作和不正常工作: https://jsfiddle.net/7tfna0L8/2/

解决方案

Robert Longson 指出，我的可重用svg的存储库"的style为display:none .对我来说，这感觉像是正确的方法.毕竟，不应以任何方式显示此存储库.问题在于浏览器可能甚至根本不解析任何样式来对此进行优化，从而可以引用元素，但不能引用样式 (例如我的渐变色) )

正在工作的jsFiddle: https://jsfiddle.net/atornblad/7tfna0L8/3/

解决方案

您的渐变色位于svg中，其显示风格为:无.那会禁用该片段中的所有CSS，因此它不起作用.尝试用width ="0" height ="0"代替display:none.

I'm building an icon solution using SVG, where parts of icons need to be reusable. There are a few different <svg /> elements inline in my HTML document, and the <use /> element works perfectly for reusing shapes – rects, paths and so on, even between svg elements.

However, reusing other definitions, like <radialGradient /> doesn't work for me. When the gradient is defined within a <defs /> element in the same <svg /> element, it works as expected, but not when the gradient is defined in another <svg /> element.

Pseudo code

<!-- Near the top of my BODY element -->
<!-- This is where I keep the SVG stuff I want to reuse -->
<svg id="for-reuse" style="display:none">
  <defs>
    <path id="marker" d="M63 127L49 93C44 80 52 69 63 69L64 69C75 69 83 80 78 93L64 127" />
    <radialGradient id="shadow">
      <stop offset="10%" stop-color="rgba(0,0,0,0.4)" />
      <stop offset="90%" stop-color="rgba(0,0,0,0)" />
    </radialGradient>
  </defs>
</svg>

<!-- Further down the html document -->
<svg viewBox="0 0 128 128" style="width:64px; height:64px" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <!-- This use element works fine! -->
  <use xlink:href="#marker" style="fill:black" />

  <!-- But this fill attribute does not! -->
  <rect x="5" y="5" width="20" height="20" fill="url(#shadow)" />
</svg>

Why is it possible to use shapes from other svg elements, but not attribute values like this? When I move the shadow gradient into a defs element inside the visible svg element, the reference works perfectly.

Here is a JSFiddle that illustrates both working and non-working: https://jsfiddle.net/7tfna0L8/2/

The solution

Robert Longson pointed out that my "repository" of reusable svg had a style of display:none. For me, that feels like the correct way to do this. After all, this repository should not be displayed in any way. The problem is that the browser optimizes this by probably not even parsing any style at all, which makes it possible to reference elements, but not style (like my gradient)

Working jsFiddle: https://jsfiddle.net/atornblad/7tfna0L8/3/

解决方案

Your far-gradient is in an svg which has a style of display:none. That disables all CSS within that fragment so it doesn't work. Try width="0" height="0" instead of display:none.

这篇关于如何从其他内联SVG元素引用radialGradient?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！