在 SVG 中居中图像

【问题标题】：Centering image inside SVG在 SVG 中居中图像
【发布时间】：2018-08-07 11:46:01
【问题描述】：

是否有一些简单的解决方案可以使图像在 SVG 内的 X 和 Y 上居中？我必须保持 svg 元素的百分比。

svg {
  width: 20%;
}

<svg version="1.1" id="Izolovaný_režim" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 294.7 320.3" xml:space="preserve">

  <pattern id="img" patternUnits="userSpaceOnUse" width="100%" height="100%">
      <image xlink:href="https://cdn-mf0.heartyhosting.com/sites/mensfitness.com/files/styles/wide_videos/public/1280-fit-man-work-desk.jpg?itok=xpQGNXMI" x />
   </pattern>
             
        <g>
            <polygon points="147.4,320.3 294.7,235.2 294.7,85.1 147.4,0 0,85.1 0,235.2 	" fill="url(#img)"/>
          
        </g>
 </svg>

谢谢。 ;)

【问题讨论】：

不清楚。请描述图像、图案、多边形和 svg 所需的相对位置和大小。

标签： html css image svg center

【解决方案1】：

要使您的图像图案在多边形中居中，您可以使用pattern 的x 和y 属性来设置图像的原点。

因此，在您的情况下，您可以将其设置为 x="50%" y="50%"

svg {
  width: 20%;
}

<svg version="1.1" id="Izolovaný_režim" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 294.7 320.3" xml:space="preserve">

  <pattern id="img" patternUnits="userSpaceOnUse" width="100%" height="100%" x="50%" y="50%">
      <image xlink:href="https://cdn-mf0.heartyhosting.com/sites/mensfitness.com/files/styles/wide_videos/public/1280-fit-man-work-desk.jpg?itok=xpQGNXMI" x />
   </pattern>
             
        <g>
            <polygon points="147.4,320.3 294.7,235.2 294.7,85.1 147.4,0 0,85.1 0,235.2 	" fill="url(#img)"/>
          
        </g>
 </svg>

【讨论】：

谢谢，但我认为这并没有解决我的问题。我需要查看此处概述的区域：imgur.com/a/kVtA7