8

その場でjavascriptで変更できる動的なぼかし効果を作成しようとしています。

まず、この非常に単純な svg フィルターを使用しています。

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

stdDeviation は 0 から始まります。これを JavaScript で変更できるようにしたいと考えています。いろいろ試してみたのですが、なかなかうまくまとまりません。

まず、(jQuery を使用していることに注意する必要があります)、単純に feGaussianBlur 要素を選択して、その属性を変更しようとしました。

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

これは、私が期待したように既存の属性を置き換えませんでしたが、代わりに別の属性を追加しました<feGaussianBlur stdDeviation="0" stdDeviation="5" /> 。

次に、フィルターの内容を新しいものに単純に置き換えようとしました。

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

今回は、変更に成功しなかっただけでなく、このフィルターが適用されている要素が完全に消えてしまいました (フィルターが壊れているか、そのようなものだと思います)。

前の両方のケースで、フィルターの css 宣言を後で再適用しようとさえしました。

私が DID の作業を試みた 1 つのことは、10 個の異なる値を持つ 10 個の異なるフィルターを構築することでした。次に、JavaScript で SVG を変更するのではなく、単に css を別のフィルター ID に再割り当てしました。正直なところ、このアプローチはもう少し..適切ですか? ただし、大きな欠点は、汎用性が低く、変更に多くの作業が必要なことです。また、100 個のフィルター宣言が必要になる小数点以下の値を使用することをお勧めします。

だから、私の質問は... javascriptを使用してSVGフィルター(私の場合、具体的にはぼかしフィルター)を動的に変更する良い方法はありますか? 存在する場合、セマンティクスと標準の観点から、それは立派なアプローチですか? 他に何もないとしても、いくつかの (小数なしで生活できる) フィルターを使用してそれらを交換するという解決策に喜んでフォールバックしますが、最初にオプションを検討したいと思います。

または、解決策がなくても、少なくとも最初の数回の試行がうまくいかなかった理由を説明できる場合は、お知らせください! 理由は何なのか気になります。

4

2 に答える 2

11

jquery ではなく、通常の DOM を使用してこれを行う方が簡単です。id を feGaussianBlur 要素に移動します

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

その後

document.getElementById("blur").setAttribute("stdDeviation", "5");

または代わりに

document.getElementById("blur").setStdDeviation(5, 5);
于 2013-10-02T08:29:04.607 に答える