11

我正在尝试在 SVG 中绘制一个带有阴影的简单圆圈，但由于某种原因，顶部和左侧边缘被剪裁了。这在 Chrome 和 Safari 中都会发生。

在此处输入图像描述

我正在使用在 w3schools 教程SVG Drop Shadows中找到的代码，修改为使用圆形。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="2" dy="2" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="1" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <circle r="30" cx="50" cy="50" style="stroke:gray; fill:aliceblue; stroke-width:3px" filter="url(#f1)" />
</svg>

我尝试移动圆圈，增加 SVG 容器的大小等，但得到了相同的结果。我还尝试使用谷歌搜索各种阴影教程，并始终修改示例代码以使用圆圈。每次都是一样的结果。

那么如何在 SVG 中绘制一个带有阴影的简单圆圈呢？

4

2 回答 2

17

原来问题在于过滤器的偏移量。圆圈周围没有足够的填充来容纳新添加的过滤器。要添加它，请使用以下属性（根据需要进行调整）：

<filter id="f1" x="-20%" y="-20%" width="200%" height="200%">

x 和 y 将过滤器的框向上和向左放置一些，这是以前缺少的。然后宽度和高度指定盒子的大小。在这种情况下，200% 是多余的，但对于较大的阴影可能是必要的。

于 2012-09-26T00:26:27.947 回答
2

替换这个： <filter id="f1" x="0" y="0" width="200%" height="200%">

对此： <filter id="f1" x="-40%" y="-40%" height="200%" width="200%">

见例子：http: //jsfiddle.net/sRfck/1/

于 2012-09-26T00:31:43.707 回答