svgにスプライトを挿入できません

私は自分のSVGにスプライトを挿入しませんでした。なぜこれはうまくいかないのですか？ svgにスプライトを挿入できません

<svg width="100" height="100"> 
<image xlink:href="blank.gif" class="flag flag-ru" x="10" y="10"  height="50" width="50"></image> 
</svg>

しかし

<img src="blank.gif" class="flag flag-ru" alt="Czech Republic" />

私は私のSVGでスプライト作業を行うことができますどのようthese sprites

を使用しています。この作品は

出典

2016-10-13 kurumkan

これらのフラグスプライトは、CSSプロパティによって<img>要素のbackground-imageをシフトbackground-positionを使用して、大きな画像の異なる部分を表示します。 <image>要素にbackground-imageまたはbackground-positionがないため、このCSSをSVG要素<image>に適用することは効果がありません。

出典

2016-10-13 15:40:23 Matey

ので、私は私のSVGでスプライトを動作させることができる方法を教えてください？ – kurumkan

''要素の 'clipPath'を作成し、同じ効果を達成するためにclipPathの位置と画像の位置で再生する必要があります。ここをクリックしてください：https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking。そして、あなたは、フラグスプライトのCSSファイルから個々のフラグのすべての位置を調べなければなりません。 – Matey

適切な「純粋な」svgソリューションが見つかりませんでした。は、代わりに私は、追加のCSSクラスを定義した：

.myDiv{ 
    position: absolute; 
    } 


<svg width="100" height="100"> 
    <img src="blank.gif" class="flag flag-cz myDiv" alt="" 
    style="top:10px; left:10px;"/> 
</svg>

出典

2016-10-13 17:03:09 kurumkan

svgにスプライトを挿入できません

答えて

関連する問題