如何在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中居中圖像

回答

相關問題