Центрированное выравнивание элемента изображения в документе SVG

Question

Я пытаюсь создать несколько графических режимов растяжения для элемента изображения в документе SVG. Следует отметить, что решение должно работать без JavaScript и CSS, и у меня нет никаких предварительных знаний о размерах изображения (просто о пространстве, где должно быть размещено изображение).

Для униформы, равномерного заполнения и заполнения, это действительно не проблема. Образцы ниже размещение изображения на площадь 400x100 пикселей:

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> 
 

 
<!-- GraphicStretchMode: UniformToFill --> 
 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" x="10" y="10" width="400" height="100"> 
 
    <image xlink:href="https://thereforeigeek.files.wordpress.com/2013/07/nessy.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid slice"/> 
 
    <rect x="0" y="0" width="400" height="100" fill="transparent" stroke="#630" stroke-width="5px"/> 
 
</svg> 
 

 
<!-- GraphicStretchMode: Fill --> 
 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" x="10" y="130" width="400" height="100"> 
 
    <image xlink:href="https://thereforeigeek.files.wordpress.com/2013/07/nessy.jpg" height="100%" width="100%" preserveAspectRatio="none"/> 
 
    <rect x="0" y="0" width="400" height="100" fill="transparent" stroke="#630" stroke-width="5px"/> 
 
</svg> 
 

 
<!-- GraphicStretchMode: Uniform --> 
 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" x="10" y="250" width="400" height="100"> 
 
    <image xlink:href="https://thereforeigeek.files.wordpress.com/2013/07/nessy.jpg" height="100%" width="100%" preserveAspectRatio="xMidYMid meet"/> 
 
    <rect x="0" y="0" width="400" height="100" fill="transparent" stroke="#630" stroke-width="5px"/> 
 
</svg> 
 

 
</svg>

Тем не менее, я не получаю режим простирания None сделаны (немасштабированный, нерастянутым в оригинальном размере, но в центре!) , (И это было то, что я изначально считал самым простым)

Любые подсказки или идеи?

Answer 1

Ваша идея «режим растяжения нет» невозможна в SVG, если вы не знаете натуральный размер используемого изображения (то есть 630 x 474 в этом случае).

«100%» относится к размеру SVG, а не к размеру исходного изображения, которое вы используете.

Update

Если вы установите размер изображения на внутренний размер изображения (чтобы он не отображать в масштабе 1: 1), то атрибут preserveAspectRatio больше не применяется. Это потому, что вы больше не масштабируете изображение до другого размера от его собственного размера.

Вам нужно использовать другой метод, чтобы переместить его так, чтобы он был центрирован. Наиболее очевидным способом является использование x и y. Смещения в этом случае будут.

x = (630 - 400)/2 = 115 
y = (474 - 100)/2 = 187 

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> 
 

 
<!-- GraphicStretchMode: None --> 
 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" x="10" y="10" width="400" height="100"> 
 
    <image xlink:href="https://thereforeigeek.files.wordpress.com/2013/07/nessy.jpg" height="474" width="630" x="-115" y="-187"/> 
 
    <rect x="0" y="0" width="400" height="100" fill="transparent" stroke="#630" stroke-width="5px"/> 
 
</svg> 
 

 
</svg>