Question

我一直在用一些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中的一个s，然后删除linearGradient。没有什么能让它发挥作用。

Answer 1

当你混合单位系统时，SVG不喜欢它 - 它比CSS更不宽容。您不能在过滤器维度中混合像素（或技术上的userSpaceUnits）和％。如果你改变：

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

到

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

过滤器可以使用（虽然我不知道为什么你会选择那些尺寸）。

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

1 个答案: