1

鉴于以下代码：

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


<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>
4

2 回答 2

0

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>
于 2013-05-07T22:08:27.887 回答
0

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

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

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

于 2013-05-07T03:49:14.297 回答