在圆形svg中添加阴影答案

【问题标题】：Adding shadows in circle svg在圆形svg中添加阴影
【发布时间】：2013-04-30 09:59:55
【问题描述】：

给定以下代码：

滤芯中的 x&y 参数实际上是什么？
过滤器元素中的 x&y 参数可以通过 javascript 保持不变吗？我可以根据 var h &var k 中变量的变化来定义 house() 中过滤器元素的变化 x&y 参数。
对代码进行必要的更改以满足需要。

<body style="background:black;margin:0px" onmousemove="house(event)">
  <defs>
    <filter id="f1" x="0" y="0" width="105%" height="105%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>
  <circle r="25" id="circle" fill="yellow" filter="url(#f1)"></circle>
</svg>
<script>
function house(e)
{
    var h=e.clientX;
    var k=e.clientY;
    var ball=document.getElementById("circle");
    var r=ball.getAttribute("r");
    ball.setAttribute("cx",h);
    ball.setAttribute("cy",k);

}
</script>

【问题讨论】：

@pswg 编辑什么？
只是格式化。你可以点击我名字上方的链接来查看问题，看看编辑的确切内容。

标签： javascript html svg svg-filters

【解决方案1】：

x 和 y 是过滤器渲染内容的来源。如果应用滤镜来制作形状阴影，在某些情况下模糊会扩展到形状内容之外，在某些情况下 x 和 y 必须为负值才能完全显示滤镜生成的阴影模糊。

这段代码显示了一个使用 janvas (janvas.com) 创建的阴影过滤器如果你用 janvas 画一个圆圈并发布 svg，你会看到这个 svg 代码到“def”标签中，x 和 y 值为 -20%

<filter id="_0_" x="-20%" y="-20%" width="200%" height="200%" type="Shadow" shadowoffsetx="5" shadowoffsety="5" shadowblur="5" shadowcolor="rgba(0,0,0,.5)">
<feOffset result="offOut" in="SourceGraphic" dx="5" dy="5">
</feOffset>
<feColorMatrix result="matrixOut" in="offOut" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0">
</feColorMatrix>
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="2">
</feGaussianBlur>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal">
</feBlend>
</filter>

【讨论】：

【解决方案2】：

过滤器元素的 x 和 y 属性以及宽度和高度，描述“过滤器区域”，即过滤器结果可见的相对于过滤器元素（或在用户空间中）的区域。更多内容见filter element的网络平台文档：

是的，您可以将这些与 JavaScript 不同，尽管这样做有点不寻常。您始终可以通过 getElementById("f1") 获取过滤器元素并以这种方式设置 x 和 y。

您的示例代码有点不清楚您要完成什么。

【讨论】：