Question

鉴于以下代码：

过滤器元素中的实际x＆amp; y参数是什么？
过滤器元素中的x＆amp; y参数是否可以通过javascript保持更改？我可以根据var h＆amp; 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>

Answer 1

过滤器元素的x和y属性以及宽度和高度描述了“过滤器区域”，即过滤器元素（或用户空间）中可见过滤器结果的区域。有关更多信息，请参阅filter element的网络平台文档：

是的，您可以通过JavaScript改变这些，尽管想要这样做有点不寻常。你总是可以通过getElementById（“f1”）来获取filter元素并设置x和y。

从您的示例代码中您有点不清楚您要完成的任务。

Answer 2

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>

在圆圈svg中添加阴影

2 个答案: