1
内で定義されたとき、私は私が外部を定義し、次にuseを使用してDOMの中に含まれるSVGスター持って動作します：SVGクリップパスは、同じ<svg>タグ
<svg>
<defs>
<symbol id="Star" viewBox="0 0 256 244">
<polygon points="128 0 168.79 78.61 256 93.2 194 156.37 207.11 244 128 204.43 48.89 244 62 156.37 0 93.2 87.21 78.61 128 0"/>
</symbol>
</defs>
</svg>
<svg class="icon star" viewBox="0 0 256 244">
<title>Add Favorite</title>
<use xlink:href="#Star"></use>
</svg>
を、それがあります単に本体の上部に定義されていますが、実際には外部ファイルになります。
私がしたいのは、星座を外側から埋めるように見せることです。これを行うために、私はstroke-widthトランジションを追加し、同じパスでSVGをクリップ：
*HTML*
<svg class="icon star" viewBox="0 0 256 244">
<defs>
<clipPath id="clip" viewBox="0 0 256 244">
<polygon points="128 0 168.79 78.61 256 93.2 194 156.37 207.11 244 128 204.43 48.89 244 62 156.37 0 93.2 87.21 78.61 128 0"/>
</clipPath>
</defs>
<title>Add Favorite</title>
<use xlink:href="#Star" clip-path="url(#clip)"></use>
</svg>
*CSS*
.icon {
margin: 50px;
width: 50px;
height: 50px;
}
.star {
fill: #0F0;
stroke: #F00;
stroke-width: 1px;
transition: stroke-width 200ms linear;
}
.star:hover {
stroke-width: 50%;
}
そして、それは御馳走に動作します！私が先頭にclipPath定義を上に移動しようとすると、ここで
<svg style="display: none;">
<defs>
<clipPath id="clip" viewBox="0 0 256 244">
<polygon points="128 0 168.79 78.61 256 93.2 194 156.37 207.11 244 128 204.43 48.89 244 62 156.37 0 93.2 87.21 78.61 128 0"/>
</clipPath>
</defs>
<defs>
<symbol id="Star" viewBox="0 0 256 244" clip-path="url(#clip)">
<polygon points="128 0 168.79 78.61 256 93.2 194 156.37 207.11 244 128 204.43 48.89 244 62 156.37 0 93.2 87.21 78.61 128 0"/>
</symbol>
</defs>
</svg>
<svg class="icon star" viewBox="0 0 256 244">
<title>Add Favorite</title>
<use xlink:href="#Star"></use>
</svg>
しかしです。ここにはnot working fiddleがあります。
以下のuseにclip-path="url(#clip)"を含めると変更はありません。同じ結果。同様に、CSS内に追加するには：
.star {
...
clip-path: url(#clip);
}
これは何ですか？どのように2つのお互いに異なるのですか？もし私がならばを使ってください。しかし、理想的には、私はDOMを可能な限りきれいに保ちたいし、すべてのSVG定義を別々にするか、少なくとも一番上にまとめてください。
**このトリックを行うように見えました。しかし、スタイルのないSVGの定義によって残された巨大な穴について私は何をしますか？** – Birrel
うん、あなたは私をパンチに倒しました。私はちょうどそれを実行し、それをコメントに戻ってきた。勝者 - 勝者。 Thnx、Robert。 – Birrel