SVG 文档中图像元素的居中对齐

Question

我正在尝试为 SVG 文档中的图像元素实现几种图形拉伸模式。 需要注意的是，该解决方案无需 JavaScript 和 CSS 即可工作，而且我对图像的尺寸（仅关于必须放置图像的空间）一无所知。

对于 Uniform、UniformToFill 和 Fill 这真的没问题。下面的示例将图像放置在 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

除非您知道所使用图像的自然尺寸（在本例中为 630 x 474），否则您对“无拉伸模式”的想法在 SVG 中是不可能实现的。

“100%”与 SVG 的大小有关，而不是您使用的源图像的大小。

更新

如果您确实将图像尺寸设置为图像的固有尺寸（使其以 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>