私は js ライブラリ (人魚) を使用して Web ページで svg を生成しています。ユーザーがキーボード ショートカットを使用してさまざまなコマンドをアクティブにすると、svg の一部にスタイルを動的に適用する必要があります。特に、論理モデルで選択されている要素として現在指定されている svg 内の要素を強調表示する必要があります。svg の動的スタイリングに関する他の質問を見ると、インライン化された静的 svg が処理されるため、おそらく私のケースには当てはまらず、これまでに試した方法はどれも機能しませんでした。
私が適用しようとしているスタイルは
border-radius : 2rem; box-shadow : 0 0 3rem red;
、通常の html に適用した場合です。これにより、要素に赤い境界線が表示されます。
私が最初に試みたのは、これを要素のクラスとして次のように含めることでした:
<style>
.highlight {
border-radius : 2rem;
box-shadow : 0 0 3rem red;
}
</style>
、、またはなどの通常の html 要素のクラス リストにクラスを追加する
、望ましいスタイリングを生成します。ただし、プログラムで要素を取得し、そのクラスをそのクラス リストに追加すると、光る境界線がなくなります。Chrome 開発者ツールを使用して svg を調べると、関連するクラスが要素のクラス リストに追加されていることがわかりました。同じ方法を使用すると、通常の html で成功しました。参考までに、クラスを追加するために使用した方法を次に示します。
graphicDiv.querySelector(selector).classList.add('highlight')
これが失敗したので、おそらく svg の内部要素内に何らかのスタイリングがあり、それが私のスタイリングを上書きしているのではないかと考えたので、スタイルに !important を追加して、それらが最も優先されるようにしました。これでもうまくいかなかったので、次に要素のスタイル プロパティを設定しようとしました。
graphicDiv.querySelector(selector).setAttribute('style', 'border-radius : 2rem !important; box-shadow : 0 0 3rem red !important;')
これでも、svg のスタイリングに違いは生じませんでした。Chrome 開発ツールで要素を調べると、スタイル属性が実際に設定されていることがわかりました。
また、svg が生成された後にスタイル定義を取得し、クラス スタイル定義をそのテキスト コンテンツに追加することで、スタイル定義を svg 自体の要素に追加しようとしました。それでもうまくいきません。
最後に、これらの css プロパティは でサポートされていない可能性があると考えたので、background-color: green;代わりに に変更しました。これは、css を使用した svg のスタイリングに関する記事で、この css prop が . これはうまくいきませんでした。svgの要素に適用してみました。どちらも機能しませんでした。
なぜこれが機能しないのか、私は完全に困惑しています。svg要素のスタイリングを動的に変更する方法を誰かが理解するのを手伝ってくれれば、非常に感謝しています!