SVG IMAGEタグ内のビットマップの位置

Question

Jenkov's excellent tutorialsおよびMDNに問い合わせても、ビットマップをSVG内に配置する方法はまだ分かりません。左上隅にビットマップを配置したいと思いますが、デフォルトではIMAGEタグのXとYの値が無視されるようです。ここ

コードです：

<svg width="600" height="400" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"> 
     <rect x="0" y="0" width="100%" height="100%" style="fill: pink"/> 
     <image x="0" y="0" width="100%" height="100%" xlink:href="http://www.google.co.uk/images/srpr/logo3w.png"/> 
    </svg> 

理由（垂直この場合は）中心画像ではなく、私が提供するX、Yの値であることですか？画像のアスペクト比が維持されるため

https://jsfiddle.net/MCAU/0x2moakt/

Answer 1

。

あなたのイメージは、あなたがそれを与えるスペースと同じアスペクト比を持っていません。 preserveAspectRatioでこの動作を制御できます。デフォルトは "xMidYMid meet"です。 イメージタグにpreserveAspectRatio="xMinYMin meet"を設定すると、あなたが望むことができます。

<image x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMinYMin meet" xlink:href="http://www.google.co.uk/images/srpr/logo3w.png"/> 

可能な値についての意味は次のとおり

より多くのスペースがx方向に存在する場合

• xMin中心に左

• xMid整列するように整列します

• xMax右揃え

とy方向に相当する。あなたのイメージの高さよりも利用でき、より高さがある場合は

• YMinトップ

• YMid中央に整列

• YMaxに合わせることだボタンに

を揃えます常にこれらのxとyの値の組み合わせに続いてmeetまたはslice、meetはシュリンクを意味しますフィットする画像とスライスとは、フィットするように画像をカットすることを意味します。

またはpreserveAspectRatio="none"の値を指定すると、画像が伸縮します。

<h2>meet</h2> 
 
<h3>xMin</h3> 
 
<svg width="200" height="100" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <rect width="100%" height="100%" fill="gray"/> 
 
    <image preserveAspectRatio="xMinYMid meet" 
 
     width="100%" height="100%" 
 
     xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> 
 
    <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> 
 
</svg> 
 
<h3>xMid</h3> 
 
<svg width="200" height="100" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <rect width="100%" height="100%" fill="gray"/> 
 
    <image preserveAspectRatio="xMidYMid meet" 
 
     width="100%" height="100%" 
 
     xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> 
 
    <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> 
 
</svg> 
 

 
<h3>xMax</h3> 
 
<svg width="200" height="100" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <rect width="100%" height="100%" fill="gray"/> 
 
    <image preserveAspectRatio="xMaxYMid meet" 
 
     width="100%" height="100%" 
 
     xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> 
 
    <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> 
 
</svg> 
 

 
<h3>YMin</h3> 
 
<svg width="100" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <rect width="100%" height="100%" fill="gray"/> 
 
    <image preserveAspectRatio="xMidYMin meet" 
 
     width="100%" height="100%" 
 
     xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> 
 
    <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> 
 
</svg> 
 

 
<h3>YMid</h3> 
 
<svg width="100" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <rect width="100%" height="100%" fill="gray"/> 
 
    <image preserveAspectRatio="xMidYMid meet" 
 
     width="100%" height="100%" 
 
     xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> 
 
    <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> 
 
</svg> 
 

 
<h3>YMax</h3> 
 
<svg width="100" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <rect width="100%" height="100%" fill="gray"/> 
 
    <image preserveAspectRatio="xMidYMax meet" 
 
     width="100%" height="100%" 
 
     xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> 
 
    <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> 
 
</svg> 
 

 
<h2>slice</h2> 
 
<h3>xMin</h3> 
 
<svg width="100" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <rect width="100%" height="100%" fill="gray"/> 
 
    <image preserveAspectRatio="xMinYMid slice" 
 
     width="100%" height="100%" 
 
     xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> 
 
    <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> 
 
</svg> 
 
<h3>xMid</h3> 
 
<svg width="100" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <rect width="100%" height="100%" fill="gray"/> 
 
    <image preserveAspectRatio="xMidYMid slice" 
 
     width="100%" height="100%" 
 
     xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> 
 
    <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> 
 
</svg> 
 

 
<h3>xMax</h3> 
 

 
<svg width="100" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <rect width="100%" height="100%" fill="gray"/> 
 
    <image preserveAspectRatio="xMaxYMid slice" 
 
     width="100%" height="100%" 
 
     xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> 
 
    <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> 
 
</svg> 
 

 
<h3>YMin</h3> 
 

 
<svg width="200" height="100" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <rect width="100%" height="100%" fill="gray"/> 
 
    <image preserveAspectRatio="xMidYMin slice" 
 
     width="100%" height="100%" 
 
     xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> 
 
    <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> 
 
</svg> 
 

 
<h3>YMid</h3> 
 

 
<svg width="200" height="100" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <rect width="100%" height="100%" fill="gray"/> 
 
    <image preserveAspectRatio="xMidYMid slice" 
 
     width="100%" height="100%" 
 
     xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> 
 
    <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> 
 
</svg> 
 

 
<h3>YMax</h3> 
 

 
<svg width="200" height="100" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <rect width="100%" height="100%" fill="gray"/> 
 
    <image preserveAspectRatio="xMidYMax slice" 
 
     width="100%" height="100%" 
 
     xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> 
 
    <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> 
 
</svg> 
 

 
<h2>none</h2> 
 

 
<svg width="200" height="100" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <rect width="100%" height="100%" fill="gray"/> 
 
    <image preserveAspectRatio="none" 
 
     width="100%" height="100%" 
 
     xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> 
 
    <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> 
 
</svg> 
 

 
<svg width="100" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <rect width="100%" height="100%" fill="gray"/> 
 
    <image preserveAspectRatio="none" 
 
     width="100%" height="100%" 
 
     xlink:href="http://sourcingrecruitment.info/wp-content/uploads/2015/05/stackoverflow.png"/> 
 
    <rect width="100%" height="100%" fill="none" stroke="blue" stroke-width="2"/> 
 
</svg>