Позиция растрового изображения в теге SVG IMAGE

Question

Проконсультировавшись с Jenkov's excellent tutorials и MDN, я до сих пор не понимаю, как выровнять растровое изображение внутри SVG. Я хотел бы позиционировать растровое изображение в верхнем левом углу, но по умолчанию, по-видимому, игнорируются мои значения X и Y в теге IMAGE.

Вот код:

<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"/> 

Значения для возможных значений являются:

если есть больше пространства в направлении х

• xMin выровнены по левому краю

• xMid выравнивания в центре

• xMax Выравнивание вправо

и эквивалент для вашего y направления. Если есть более доступная высота, чем высота вашего изображения

• YMin Align к началу

• YMid совместится в центре

• YMax Выровнять по кнопке

Это всегда сочетание этих значений x и y, за которыми следуют встреча или срез, где 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>