Question

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>

谢谢。 ;）

Answer 1

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

因此，在您的情况下，您可以将其设置为pattern

x="50%" y="50%"

svg {
  width: 20%;
}

在SVG中居中图像

1 个答案: