3

私は svg を始めたばかりで、スタイリングの制限を理解しようとしています。

svg に svg テキスト要素があります。私のテキスト要素のいくつかは、data-editable="true" でタグ付けされています。

タグ付けされた要素が何であるかをユーザーが簡単に確認できるようにしたいと思います。シンプルで切り替え可能な半透明のオーバーレイを想像しています。

クロムの DOM ビューで要素にカーソルを合わせると、テキスト要素が青っぽいオーバーレイでレンダリングされます。似たような効果か、もう少し近いものが欲しいです。

可能であればcssを使用したいと思いますが、その効果を達成する方法は何でも良いでしょう。最悪の場合、d3 と jquery を使用して rect 要素を挿入することで何かをハックできますが、それはかなり面倒です。

4

1 に答える 1

3

Erik Dahlström による回答の上に構築する

<svg width="100%" height="100%" viewBox="0 0 500 140" preserveAspectRatio="xMidYMid meet">
  <style type="text/css">
    *[data-editable=true]:hover{ filter:url(#highlight) }
  </style>
  <filter x="0" y="0" width="1" height="1" id="highlight">
     <feFlood flood-color="rgba(100,200,0,.5)"/>
     <feComposite in="SourceGraphic"/>
  </filter>

  <text data-editable="true" y="100" font-size="100">test</text>
</svg>

これはプレーンな CSS とフィルター定義で機能します。

于 2012-12-20T21:51:33.727 に答える