2

Firefox は、SVG 要素に定義された CSS プロパティを完全に無視borderしているようです。outline私の場合、 SVG グループ要素 、<g>は、複合要素を単一の論理要素にグループ化して、アプリでのユーザー操作を簡素化するために使用されます。次のコードは、Chrome で非常にうまく機能します。

<svg>
    <g>
        <rect x="10" y="10" width="50" height="50" fill="yellow"></rect>
        <rect x="20" y="20" width="30" height="30" fill="yellowgreen"></rect>
    </g>
</svg>

g:hover {
    outline: dashed 4px red;
}

http://jsfiddle.net/QQRPj/

Chrome では、マウス ポインターを 2 つの四角形のグループの上に移動すると、グループの周りに赤い破線の四角形が表示されます。ただし、 MDN で説明されcursorているように、 、display、および SVG 関連のプロパティなどのより単純な CSS プロパティをサポートしているように見えますが、Firefox で動作させることはできません。

outlineCSS プロパティをFirefox で機能させる機会はありborderますか?そのため、SVG 関連のコードにパッチを適用する代わりに、CSS の変更が唯一の効果的なパッチになる可能性がありますか?

4

1 に答える 1

2

SVG 仕様には、SVG ボーダーとアウトラインに有効なすべての CSS プロパティのリストがあり、そのリストには含まれていないため、SVG には適用されません。点滅バグを発生させる必要があります

SVG で境界線またはアウトラインが必要な場合<rect>は、オブジェクトを丸くし<rect>、必要に応じて getBBox を使用してその位置を計算する必要があります。上記の場合、外側の<svg>要素は置き換えられた要素であり、そのために境界線とアウトラインのプロパティを取得するため、ホバーを外側の要素に置くことができます。

于 2013-06-24T09:19:06.500 に答える