如何在SVG中居中图片

Question

我有一个图片svg元素，它的宽度可以是任意的。我想要水平居中图片在svg元素或div容器内。我试过使用margin: 0 auto;或者text-align : center;但是都没有起作用。 这里是jsfiddle html

<div class="background-img" style="width: 100px; height: 110px;">
   <svg class="svg-defs" width="100px" height="110px">
      <defs>
         <clipPath id="clip-triangle-10">
            <polygon points="0,0 110,0 110,100 19,100 12,107 5,100 0,100 0,0"></polygon>
         </clipPath>
      </defs>
      <rect class="svg-background" clip-path="url(#clip-triangle-10)" width="100px" height="110px"></rect>
      <image class="svg-image" clip-path="url(#clip-triangle-10)" height="100px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://upload.wikimedia.org/wikipedia/en/thumb/6/6c/Seafarers_title.jpg/225px-Seafarers_title.jpg"></image>
   </svg>
</div>

image{
 position: relative;
  display: block;
  margin: 0 auto;
  text-align : center;
}

<div class="background-img" style="width: 100px; height: 110px;">
   <svg class="svg-defs" width="100px" height="110px">
      <defs>
         <clipPath id="clip-triangle-10">
            <polygon points="0,0 110,0 110,100 19,100 12,107 5,100 0,100 0,0"></polygon>
         </clipPath>
      </defs>
      <rect class="svg-background" clip-path="url(#clip-triangle-10)" width="100px" height="110px"></rect>
      <image class="svg-image" clip-path="url(#clip-triangle-10)" height="100px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://upload.wikimedia.org/wikipedia/en/thumb/6/6c/Seafarers_title.jpg/225px-Seafarers_title.jpg"></image>
   </svg>
</div>

- Matt

Answer 1

我不确定仅通过HTML和CSS实现从外部图像中获取图像宽度是否可能。如果您愿意使用一些JavaScript，那么这可能是一个可行的解决方案：

var svgImage = document.querySelectorAll('.svg-image');

Array.prototype.forEach.call(svgImage, function(el, i){
  var xOffset = '-' + ((Math.floor(el.getBoundingClientRect().width)) - 100) / 2
  el.setAttribute('x', xOffset);
});

这段代码循环遍历每个 .svg-image，然后计算出在100像素宽的显示器中居中图像所需的偏移量。

可以在JSFiddle上看到它的效果。

- user7915634

---

我本来不想采用这个解决方案，但也许没有其他办法了。我会将这个问题保持开放状态1-2天。如果没有其他解决方案，我会接受这个答案。谢谢。 - Matt

我想不到其他的方法，纯粹是因为图像大小可能会有所不同，需要针对每个单独的图像进行计算。 - user7915634

Answer 2

   image{
 position: relative;
  display: block;
  text-align : center;   
}

<div class="background-img" style="width: 100px; height: 110px;">
   <svg class="svg-defs" width="100px" height="110px">
      <defs>
         <clipPath id="clip-triangle-10">
            <polygon points="0,0 110,0 110,100 19,100 12,107 5,100 0,100 0,0"></polygon>
         </clipPath>
      </defs>
      <rect class="svg-background" clip-path="url(#clip-triangle-10)" width="100px" height="110px"></rect>
      <image class="svg-image" x="-15px" clip-path="url(#clip-triangle-10)" height="100px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://upload.wikimedia.org/wikipedia/en/thumb/6/6c/Seafarers_title.jpg/225px-Seafarers_title.jpg"></image>
   </svg>
</div>

- Nofar Eliasi

---

请再仔细阅读我的问题：“image svg元素，它可以具有任意宽度”。这个解决方案只适用于这个图像，而不是具有不同宽度的图像。 - Matt

每个图像都是不同的，而且每个图像你需要从另一个像素开始，很抱歉我不知道答案。 - Nofar Eliasi

那么，这个问题没有通用的解决方案吗？ - Matt

@Matt，请检查我的解决方案，它可以适用于容器中任何宽度的SVG。 - iamwtk

@iamwtk，你居中了容器，而不是图片。 - Matt

Answer 3

嗨，只需将margin:0 auto添加到您的background-img块即可

https://jsfiddle.net/mjne9eyz/3/

- Dmytro Lishtvan

---

我需要将图像居中，而不是图像容器。 - Matt

SVG默认是内联的。将display：block添加到其中，然后margin：auto将按预期工作。 - Dmytro Lishtvan

你的两个jsfiddle是相同的，你居中了容器，而不是图像。 - Matt

hmm https://jsfiddle.net/mjne9eyz/4/ svg{display: block; margin: 0 auto;}我确定这是一个居中的 SVG。 - Dmytro Lishtvan

我将容器的宽度删除并设置为100％宽度，然后将display:block添加到svg，并使其居中。 - Dmytro Lishtvan