Question

我正在尝试为SVG文档中的图像元素实现几种图形拉伸模式。需要注意的是，解决方案应该在没有JavaScript和CSS的情况下工作，而且我没有关于图像尺寸的前期知识（只是关于图像必须放置的空间）。

对于Uniform，UniformToFill和Fill来说这真的没问题。以下示例将图像放置在400x100像素的区域上：

＆＃13;

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

＆＃13;

然而，我没有完成拉伸模式无（未缩放，未拉伸，原始尺寸但居中！）。（这是我最初认为最简单的情况）

任何提示或想法？

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>

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

1 个答案: