使用javascript动态修改SVG过滤器 [英] Dynamically modifying an SVG filter with javascript

问题描述

我正在尝试创建动态模糊效果，可以使用javascript动态修改。

I'm trying to create a dynamic blur effect, that can be modified with javascript on the fly.

首先，我使用这个非常简单svg过滤器：

To start with, I'm using this really simple svg filter:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="0" />
</filter>
</svg>

stdDeviation从0开始，我希望能够使用javascript更改它。我已经尝试了一些不同的东西，但我还没能完全解决它。

The stdDeviation starts at 0, and I want to be able to change that with the javascript. I've tried a few different things, but I haven't quite been able to nail it down.

首先，（我应该注意到我使用的是jQuery）我试着简单地选择feGaussianBlur元素并修改它的属性：

Firstly, (and I should note that I am using jQuery) I tried to simply select the feGaussianBlur element and modify it's attribute:

$('feGaussianBlur').attr('stdDeviation',5);

这并没有像我预期的那样取代现有属性，而是添加了另一个，留下我使用< feGaussianBlur stdDeviation =0stdDeviation =5/>
从HTML中删除原始stdDeviation，使其只有一个属性在更改之后，它没有任何效果。

This didn't replace the already existing attribute like I expected, but rather, added another, leaving me with <feGaussianBlur stdDeviation="0" stdDeviation="5" /> Removing the original stdDeviation from the HTML made it so that there was only one attribute after the change, but it had no effect.

接下来，我尝试用新的内容替换过滤器的内容：

Next, I attempted to simply replace the contents of the filter with the new one:

$('filter#blur').html('<feGaussianBlur stdDeviation="5" />');

这一次，它不仅没有成功改变，而且还导致了这个过滤器的元素应用于，完全消失（我假设过滤器已损坏，或者某些事情）。

This time, not only did it not succeed in changing, but it caused the element that this filter is applied to, to disappear completely (I assume the filter was corrupted, or somesuch).

我甚至尝试重新应用过滤器的css声明，因为以前的情况。

I even tried re-applying the css declaration for the filter afterwards, for both of the previous cases.

我尝试DID工作的一件事是构建10个不同的过滤器，有10个不同的值，然后不是改变SVG javascript，我只是将css重新分配给不同的过滤器ID。说实话，这种方法似乎更合适......但最大的缺点是它不是非常通用，并且需要做很多工作来改变事物。另外，我更喜欢使用带小数位的值，这需要100个过滤器声明才能完成。

The one thing that I tried that DID work, was to build out 10 different filters, with 10 different values, and then rather than changing the SVG with the javascript, I simply reassigned the css to a different filter ID. To be honest, this approach seems a little more.. proper? The big downside though is that it isn't very versatile, and takes a lot of work to change things. Also, I'd prefer to use values with a decimal place, which would require 100 filter declarations to accomplish.

所以，我的问题是......有没有好处使用javascript动态修改SVG过滤器（在我的情况下，具体是模糊过滤器）的方法？如果存在，在语义和标准方面是否是一种可敬的方法？如果没有别的，我更愿意回到我的解决方案，使用一些（我可以不带小数）过滤器并将它们交换掉，但我想首先探索我的选择。

So, my question is... Is there a good way to dynamically modify an SVG filter (in my case, the blur filter specifically) using javascript? If there is, is it a respectable approach, in terms of semantics and standards? If nothing else, I'm more than willing to fall back to my solution of using a few (I can live without decimals) filters and swapping them out, but I want to explore my options first.

或者，如果你没有解决方案，但至少可以向我解释为什么我的第一次尝试不起作用，请告诉我！我很好奇原因是什么。

Or, if you don't have a solution, but could at least explain to me why my first couple attempts did not work, please let me know! I'm curious what the reasons are.

推荐答案

这个问题很老，但值得回答。

This question is old, but it's worth answering.

在SVG元素上使用jQuery设置/获取属性可能不起作用有两个原因：

There are two reasons why setting/getting attributes with jQuery on SVG elements might not work:

jQuery在其 attr（）实施中有此代码：

jQuery has this code in its attr() implementation:

if ( .... || !jQuery.isXMLDoc( elem ) ) {
   name = name.toLowerCase();

换句话说，它读取/设置属性 stddeviation ，而不是
stdDeviation 。

In other words, it reads/sets the attribute stddeviation, not stdDeviation.

在旧的jQuery版本中，使用了propetry而不是属性。如果属性不是简单的字符串值，则会导致失败（例如，对于SVG元素，className不是字符串，而是实例SVGAnimatedString。例如，没有真正的stdDeviation属性完全，但X和Y的）。有关详细信息，请参阅 prop（）和 attr（）的文档。

In old jQuery versions, the propetry, instead of the attribute, is used. This casuses things to fail if the property is not a simple string value (E.g., "For an SVG element, className is not a string, but an instance of SVGAnimatedString". E.g., There isn't really a stdDeviation property at all, but X and Y ones). See the documentation of prop() and attr() for more information.

这是 xattr（）的实现，它有效其中 attr（）失败，因为它不会尝试变聪明。使用它而不是 attr（）。

Here's an implementation of xattr(), which works where attr() fails, because it doesn't try to be smart. Use it instead of attr().

jQuery.fn.xattr = function(name, val) {
  if (val !== undefined) {
    this.each(function() {
      this.setAttribute(name, val);
    });
    return this;
  }
  else {
    if (this.length)
      return this[0].getAttribute(name);
  }
};

这篇关于使用javascript动态修改SVG过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！