ちょっと、私はsvgサークルに追加したい画像がありますが、外部CSSを使用する必要があります。私はそのようにする方法はあまりよく分かりません。私は背景画像を追加しようとしましたが、うまくいきません。私もfill:url(# "image.png")を試みました。それは私がsvgsを使用しているjavascriptのゲームなので、svgでなければなりません。助けてください!cssを使用してSVGサークルに画像を追加しようとしています
答えて
任意の画像URLを使用してこれを行う方法はありません。
あなたが本当にできることは、指定された背景の選択を切り替えることです。一例として、我々は円のそれぞれに異なる背景パターン付与された以下のデモに:/:
#circle1 {
fill: url(#myPattern1);
}
#circle2 {
fill: url(#myPattern2);
}
<svg width="200" height="100">
<defs>
<pattern id="myPattern1" patternUnits="userSpaceOnUse"
width="100" height="100">
<image href="http://lorempixel.com/output/cats-q-c-100-100-1.jpg"
x="0" y="0" width="100" height="100" />
</pattern>
<pattern id="myPattern2" patternUnits="userSpaceOnUse"
width="100" height="100">
<image href="http://lorempixel.com/output/cats-q-c-100-100-3.jpg"
x="0" y="0" width="100" height="100" />
</pattern>
</defs>
<circle id="circle1" cx="50" cy="50" r="50" />
<circle id="circle2" cx="150" cy="50" r="50" />
</svg>
他の場所で使用され、直接レンダリングされない要素のコンテナです。 https://www.w3.org/TR/SVG/single-page.html#struct-Headを参照してください –
これをやろうとしたときに、希望の画像が埋められましたが、何らかの理由でコードが停止します。このイメージが表示されているsvg円は、カーソルの位置によって制御されますが、イメージを変更するコードを入力すると、何らかの理由でカーソルの入力がすべて一緒に取れなくなります –
- 1. SVGサークルに画像を追加する
- 2. CSSを使用して画像を追加しますか?
- 3. リストに画像を追加しようとしています
- 4. SVGスプライト - 規模にこのようなCSSの背景画像としてSVGスプライトを使用して
- 5. RecyclerVIewAdapterとPicassoを使用してRecyclerViewに画像を追加しようとしています
- 6. TinyMCEを使用して画像にインラインCSSを追加します。
- 7. cssを使って画像を整列しようとしています
- 8. FrameLayout.addView()でキャンバスに画像ビューを追加しようとしています。
- 9. ラベルに簡単な画像を追加しようとしています
- 10. CSSを使用してアンカータグに画像を追加するにはどうすればよいですか?
- 11. html、css、bootstrapを使用してホームページに画像を追加する
- 12. CSSを使用して背景画像にテキストを追加する
- 13. 画像を追加してPHPを使用して表示
- 14. CSS - 白黒PNG画像にフィルターを使用してカラーを追加
- 15. jQueryを使用してiframeを追加しようとしています
- 16. stack()を使用してシェイプを追加しようとしています
- 17. スケールSVG画像は、私が使用して、以下のラファエルを実行しようとしてい
- 18. CSSを使用して画像のボーダー内側を追加する方法
- 19. slidifyを使用してタイトルスライドに画像を追加する
- 20. javascriptを使用してhtmlプリントアウトに画像を追加する
- 21. Xamarin.Formsを使用して画像にオーバーレイカラーを追加する
- 22. ASP.NET Ajaxを使用して画像にスクロールバーを追加する
- 23. Javascriptを使用してDOMに画像要素を追加します。
- 24. novacodeを使用して.docxにヘッダ内の画像を追加します。DocX
- 25. Javascriptを使用してDOMに画像を連続して追加する
- 26. Prawnを使用してpdfファイルに画像を追加
- 27. jspdfを使用してpdfに画像を追加
- 28. cezpdfを使用してpdfに画像を追加
- 29. 追加画像をドロップダウン矢印としてどのように追加しますか?
- 30. は、私はJavascriptを使用してHTML5のキャンバスに画像を追加している画像ではJavaScript
の可能な重複を(HTTP [背景画像とSVGパス要素を記入] /stackoverflow.com/questions/3796025/fill-svg-path-element-with-a-background-image) – Aziz