0

以下のSVGを参照してください。

<svg width="5cm" height="4cm" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">

<rect x="0" y="0" width="150px" height="150px"/>

    <image xlink:href="firefox.jpg" x="0" y="0" height="150px" width="150px"/>
</svg>

出力は次のようになります。

ここに画像の説明を入力してください

長方形全体を占めるように画像を作成するにはどうすればよいですか？

ありがとう、

シヴァ

4

2 に答える 2

1

rectと同じアスペクト比の画像で機能します：http：//jsfiddle.net/M24gX/

<svg width="8cm" height="8cm" version="1.1">
    <rect x="0" y="0" width="150px" height="150px" fill="red"/>
    <image xlink:href="http://lorempixel.com/150/150/sports/"
        x="0" y="0" height="150px" width="150px"/>
</svg>

rectとはアスペクト比が異なる画像では機能しません：http：//jsfiddle.net/5v9bd/

<svg width="8cm" height="8cm" version="1.1">
    <rect x="0" y="0" width="150px" height="150px" fill="red"/>
    <image xlink:href="http://lorempixel.com/300/150/sports/"
        x="0" y="0" height="150px" width="150px"/>
</svg>

アスペクト比に関係なく、画像を長方形の150x150px全体に塗りつぶしたい場合は、次のようにします。

  • height="150px"とwidth="150px"を割り当てます（すでに行ったように）
  • 画像のスケーリングが不均一になるようにpreserveAspectRatio="none"を割り当てます

例： http： //jsfiddle.net/Fq96J/

<svg width="8cm" height="8cm" version="1.1">
    <rect x="0" y="0" width="150px" height="150px" fill="red"/>
    <image xlink:href="http://lorempixel.com/300/150/sports/"
        x="0" y="0" height="150px" width="150px" preserveAspectRatio="none"/>
</svg>

preserveAspectRatioは、SVGを操作するときに必ず知っておくべき属性なので、いくつかのドキュメントを読んで少し試してみることをお勧めします。良い説明はで見つけることができます

于 2013-03-08T09:19:41.217 に答える
0

それは私のJSFiddleで正常に動作します。JSFiddleで再現できますか？

<svg width="8cm" height="8cm" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">

<rect x="0" y="0" width="150px" height="150px" stroke="red" stroke-width="3"/>

    <image xlink:href="firefox.jpg" x="0" y="0" height="150px" width="150px"/>
</svg>
于 2013-03-07T09:21:06.047 に答える