2016-04-13 7 views
1

私は私のIE10上のサイトと11SVGグラフィックはIE10でスケールしないと11

それはグーグル・クロームとFirefoxでは正常に動作ではなく、Internet ExplorerでのSVGグラフィックスに問題があります。グラフィックは小さく、私はIE上でそれを拡大することはできません。

<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レンダリングインストール1つのプラグインがあります: _HTTPSを://ワードプレスのように

SVGオブジェクトが書かれています。 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> 

これは私がグーグル・クロームとFirefoxでの持っているものであり、それは大丈夫です。

enter image description here

そして、これは私は、Internet Explorer上で持っているものです。

enter image description here

(それは小さなだ)そして、私はこのコードで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では動作しません。それはあなたがこのようなSVGオブジェクトを定義することによって、その割合に応じてスケーラブルにすることができ

+0

@ charl-steynbergご回答いただきありがとうございます!非常に便利。しかし私は包括的な情報を教えていませんでした。私の投稿に追加したplsの追加情報を参照してください – chigher

答えて

0

..

は私がwidth: auto;またはwidth: 100px; を使用することを試みた。しかし、それは動作しません...まだ小さなまま:

<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> 

width=1119.4部分を参照してください、しかし、あなたのSVGコンテンツの用心、それはSVG「ビューボックス」サイズよりたくさん大きいです。

、SVGのグラフィックエディタを使用してみてください、あなたがここに見つけることができる「Inkscapeの」-itの自由とLinux上で動作し、Windowsの& MacOSXの、のように:あなたのSVGを作成した後https://inkscape.org/en/download/

をし、「プレーンSVG」としてそれを保存&あなたが好きなテキストエディタでSVGコードを編集して開き、上記のように幅が&のコンテナ要素の高さに合わせて縮尺を変更します。

インラインでHTMLに埋め込みたい場合は、SVGグラフィックスオーサリングソフトウェアが作成した(Inkscapeのような)XML宣言を互換性のために削除してください。

関連する問題