使用混合百分比和固定单位尺寸的 SVG 过滤器不起作用答案

【问题标题】：SVG filter using mixed percentage and fixed unit dimensions does not work使用混合百分比和固定单位尺寸的 SVG 过滤器不起作用
【发布时间】：2014-05-13 09:12:53
【问题描述】：

我一直在用一些 SVG 的优点更新一个网站，并且取得了很多成就。但是，我坚持向 SVG 形状添加阴影。代码如下：

<svg version="1.1" id="shape1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80%" x="0px" y="0px" viewBox="0 0 1000 644" enable-background="new 0 0 1000 644" xml:space="preserve">
  <defs>
    <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
      <stop offset="10%" stop-color="#ff6102" stop-opacity="1"/>
      <stop offset="90%" stop-color="#f7850a" stop-opacity="1"/>
    </linearGradient>
    <filter id="shadow" y="-10" x="-10" width="85%">
      <feOffset in="SourceAlpha" dx="3" dy="3" result="offset" />
      <feGaussianBlur in="offset" stdDeviation="10" result="blur" />
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
  <path class="wrap" fill-rule="evenodd" clip-rule="evenodd" style="fill: url(#gradient1); filter: url(#shadow);" d="M32.3 0.3L935 82.8c34.3 4.2 38.7 28.9 34.1 59.2l-56.7 398.3c-6.4 23.2-29.8 32.9-66.4 34.8L95.4 643.3c-20.2 0-38.7-17.3-41.4-38.5L0.6 38.9C-2 17.6 12.1 0.3 32.3 0.3z"/>
 <path fill="none" class="wrap-stroke" stroke="#FFEB00" transform="translate(-42,-28)" d="M84.9,37.3l883.1,80c33.6,4.1,37.9,28.1,33.4,57.4l-55.5,386.5c-6.3,22.5-29.1,31.9-64.9,33.8l-734.3,66.2c-19.7,0-37.9-16.7-40.5-37.4L53.9,74.7C51.3,54.1,65.2,37.3,84.9,37.3z"/>
</svg>

如果我删除过滤器的代码，形状显示正常：

<svg version="1.1" id="shape1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80%" x="0px" y="0px" viewBox="0 0 1000 644" enable-background="new 0 0 1000 644" xml:space="preserve">
  <defs>
    <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
      <stop offset="10%" stop-color="#ff6102" stop-opacity="1"/>
      <stop offset="90%" stop-color="#f7850a" stop-opacity="1"/>
    </linearGradient>
  </defs>
  <path class="wrap" fill-rule="evenodd" clip-rule="evenodd" style="fill: url(#gradient1);" d="M32.3 0.3L935 82.8c34.3 4.2 38.7 28.9 34.1 59.2l-56.7 398.3c-6.4 23.2-29.8 32.9-66.4 34.8L95.4 643.3c-20.2 0-38.7-17.3-41.4-38.5L0.6 38.9C-2 17.6 12.1 0.3 32.3 0.3z"/>
 <path fill="none" class="wrap-stroke" stroke="#FFEB00" transform="translate(-42,-28)" d="M84.9,37.3l883.1,80c33.6,4.1,37.9,28.1,33.4,57.4l-55.5,386.5c-6.3,22.5-29.1,31.9-64.9,33.8l-734.3,66.2c-19.7,0-37.9-16.7-40.5-37.4L53.9,74.7C51.3,54.1,65.2,37.3,84.9,37.3z"/>
</svg>

如果我只是从样式属性style="fill: url(#gradient1);" 中删除对过滤器的引用，它就可以正常工作。

知道我做错了什么吗？我尝试过：更改中元素的顺序，删除 svg 中的其中一个，并删除线性渐变。没有什么可以让它发挥作用。

【问题讨论】：

标签： svg svg-filters

【解决方案1】：

SVG 不喜欢混合单位系统 - 它远不如 CSS 宽容。您不能在过滤器尺寸中混合像素（或技术上的 userSpaceUnits）和 %。如果你改变：

<filter id="shadow" y="-10" x="-10" width="85%">

到

<filter id="shadow" y="-10%" x="-10%" width="85%">

过滤器会起作用（虽然我不知道你为什么会选择这些尺寸）。

【讨论】：

就是这样！谢谢您的帮助。我在液体设计中使用 % 而不是 px。