使用 SVG 居中图像答案

【问题标题】：Centering image with SVG使用 SVG 居中图像
【发布时间】：2012-06-21 18:17:11
【问题描述】：

我的.svg 文件中有以下图片：

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

我希望它显示在页面的中间，但似乎左上角在中间。如何让图片的中心显示在页面的中心？

【问题讨论】：

标签： image svg

【解决方案1】：

这样的事情应该可以工作：

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

【讨论】：

这真是天才，非常感谢您的分享。在流体布局上尝试将彩色圆圈切换为圆形位图时救了我。
如果height 或width 不是像素，这将不起作用
@depperm true，直到 transform 支持单位（它已经在 css 中支持）

【解决方案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>

【讨论】：

谢谢。这是很多工作，但它确实有效。我会暂时搁置一下，看看是否有人能想出更简单的方法，如果没有，那就是你的了。
当您有嵌套对象和枢轴点时，此模式效果很好。谢谢！