SVG圖形不IE10規模和11

我有SVG圖形的一個問題在我的網站上的IE10和11SVG圖形不IE10規模和11

它工作正常，在谷歌，Chrome和Firefox，但無法在Internet Explorer。圖形很小，我無法在IE上進行縮放。

的SVG對象寫爲：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 570 910" style="enable-background:new 0 0 570 910;" xml:space="preserve" class="style-svg rule-svg6 alignnone size-full wp-image-9121 replaced-svg">

這是其在CMS的WordPress

<img src="http://example.net/mps/noaccess/wp-content/uploads/2016/01/Prevalence-A.svg" alt="Prevalence-A" class="style-svg rule-svg2 alignnone size-full wp-image-9041" />

如何增加則說明沒有安裝一個插件，它渲染SVG： _HTTPS：// WordPress的。 org/plugins/svg-support/

此圖形的每一行都由它自己的矩形組成。所以，我的圖形外觀：

<g> 
      <rect x="220.2" y="196.2" class="rop110" width="736" height="28"></rect> 
      <rect x="220.2" y="106.2" class="rop110" width="699" height="28"></rect> 
      <rect x="220.2" y="256.2" class="rop110" width="829" height="28"></rect> 
      <rect x="220.2" y="76.2" class="rop110" width="642" height="28"></rect> 
      <rect x="220.2" y="226.2" class="rop110" width="456" height="28"></rect> 
      <rect x="220.2" y="46.2" class="rop110" width="365" height="28"></rect> 
      <rect x="220.2" y="166.2" class="rop110" width="596" height="28"></rect> 
      <rect x="220.2" y="136.2" class="rop110" width="141" height="28"></rect> 
     </g>

這是我對在谷歌，Chrome和Firefox和它的確定。

這是我在Internet Explorer（這是很小的）

而且我有一個svg.image.css與此代碼：

svg.style-svg {display: inline-block; 

position: relative; 

width: 100%; 

padding-bottom: 100%; 

vertical-align: middle; 

overflow: hidden; }

當我改變寬度時，它適用於Google Chrome和Firefox，但不適用於Internet Explorer。它保持還很小..

我試着使用width: auto;或width: 100px; 但它不工作..

來源

2016-04-13 chigher

@ charl-steynberg感謝兄弟爲您解答！很有用。但我沒有告訴全面的信息。請參閱我在帖子中添加的其他信息 – chigher

你可以把它根據其比例可伸縮的定義是這樣的SVG對象：

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    version="1.1" 
    width="100%" 
    height="100%" 
    viewBox="0 0 570 910" 
    style="display:block"> 

    <rect x="49.6" y="41.6" class="rop20" width="1119.4" height="302"></rect> 

</svg>

雖然注意你的SVG內容，但看到width=1119.4部分，它比SVG「viewBox」大小大很多。

嘗試使用SVG圖形編輯器，如「Inkscape中」 - 它的免費，運行在Linux，Windows & MacOSX的，你可以在這裏找到：https://inkscape.org/en/download/

創建SVG後並將其保存爲「普通SVG」，那麼你可以在你最喜歡的文本編輯器中打開&編輯SVG代碼，使其按照上面顯示的其容器元素的高度&進行縮放。

如果您想使用它嵌入HTML並嵌入，只需刪除SVG圖形創作軟件爲了兼容性而創建的「XML」聲明（如Inkscape）。

來源

2016-04-13 01:53:58 argon

SVG圖形不IE10規模和11

回答

相關問題