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控制此行为，默认为＆＃34; xMidYMid符合＆＃34;。您想要的是通过在图片代码中设置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"的值，然后您的图片就会拉长。

＆＃13;

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

＆＃13;

位图在SVG IMAGE标记中的位置

1 个答案: