使用SVG居中图片

Question

我在我的.svg文件中有以下图像:

<image xlink:href="developer.mozilla.png" x="50%" y="50%" height="62" width="71"/>

我想让图片显示在页面中央，但它似乎是以左上角为中心点。如何让图片的中心点显示在页面中央？

- SomeKittens

Answer 1

这样应该可以工作：

<image xlink:href="developer.mozilla.png" x="50%" y="50%" height="62" width="71" transform="translate(-35.5,-31)"/>

- Erik Dahlström

---

这太聪明了，非常感谢您的分享。在尝试将彩色圆圈切换到流体布局上的圆形位图时，为我节省了很多时间。 - mmmeff

如果 height 或 width 不是像素，则此方法无效。 - depperm

@depperm true，直到转换支持单位（就像在 CSS 中一样） - Erik Dahlström

Answer 2

这是一种方法...

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <svg x="50%" y="50%" width="258px" height="221px" overflow="visible"> 
    <image x="-129px" y="-110.5px" width="258px" height="221px" xlink:href="http://images2.wikia.nocookie.net/__cb20110303182948/hogwartsrpg/images/9/95/KittenCareCat.png"/>
  </svg>
</svg>

- Robert Longson

---

谢谢。这是很多工作，但它有效。我会让它保持开放一段时间，看看是否有人能想出更简单的方法，但如果没有，那就是你的了。 - SomeKittens

这种模式在您拥有嵌套对象和枢轴点时非常有效。谢谢！ - Benny Code