如何在svg中居中图像

我有一个图像svg元素，它可以有任何宽度。我想在svg元素或div容器中水平居中放置图像。我试过margin: 0 auto;或text-align : center;但它不起作用。如何在svg中居中图像

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>

来源

2017-10-18 Matt

我不知道这是可能的通过只是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

来源

2017-10-18 10:09:24

我想避免这种解决方案，但也许没有其他办法。我会让这个问题开放1-2天。如果没有其他解决方案，我会接受这个答案。谢谢。 – Matt

我想不出另一种方式。纯粹是因为图像尺寸可能会发生变化，并且需要针对每个人进行计算。 – 2017-10-18 10:12:01

我认为你是对的。 – Matt

-1

嗨只需添加margin: 0 auto to your背景IMG块

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

来源

2017-10-18 09:55:55

我需要到中心的形象，没有图像容器 – Matt

@马特多了一个小提琴https://jsfiddle.net/mjne9eyz/4/ –

SVG是行内默认。添加显示：块，然后margin：auto将按预期工作。 –

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>

来源

2017-10-18 09:56:10

请再读一遍我的问题：_“image svg element，which can have无论宽度“。此解决方案适用于此图像，而不是各种宽度的图像 – Matt

每个图像都是不同的，每个图像需要从另一个像素开始，对不起，我不知道答案 –

那么，是否没有通用解决方案？ – Matt

如何在svg中居中图像

回答

相关问题