堆棧內存溢出
  簡體   English   中英

Inkscape .HTML SVG文件適用於Chrome，但不適用於IE9

[英]Inkscape .HTML SVG file works in Chrome but not in IE9

 原文  2013-10-15 19:47:51  9   4    html/ html5/ google-chrome/ svg/ internet-explorer-9

問題描述

我有以下Inkscape導出的SVG：

[TESTSVG.HTML] 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="744.09448819"
   height="1052.3622047"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.4 r9939"
   sodipodi:docname="mainscreen.svg">
  <defs
     id="defs4" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.7"
     inkscape:cx="175.99454"
     inkscape:cy="739.86976"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1366"
     inkscape:window-height="706"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <path
       sodipodi:type="arc"
       style="fill:#ff0000;fill-opacity:1;stroke:#495677;stroke-width:23.16900062999999900;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
       id="circle1"
       sodipodi:cx="227.14285"
       sodipodi:cy="156.6479"
       sodipodi:rx="47.142857"
       sodipodi:ry="44.285713"
       d="m 274.28571,156.6479 a 47.142857,44.285713 0 1 1 -94.28571,0 47.142857,44.285713 0 1 1 94.28571,0 z"
       inkscape:label="#path2985" />
    <rect
       style="fill:#ffff00;fill-opacity:1;stroke:#495677;stroke-width:4.86899999999999980;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
       id="box1"
       width="284.28571"
       height="110"
       x="312.85715"
       y="98.076469"
       inkscape:label="#box1" />
  </g>
</svg>

保存為HTML文件（TESTSVG.HTML），它適用於Chrome，但不適用於IE9。 如果您將文件名更改為.SVG（TESTSVG.SVG），它將適用於兩種瀏覽器。

我需要使用HTML擴展使它在IE9上工作。

請求任何幫助。

4 個解決方案

解決方案1
 1  2013-10-15 19:53:57

您可以添加這樣的HTML DTD並嵌入SVG（在IE10中工作 - 無法在9中測試）我認為應該工作 

<!DOCTYPE html>
<html>
<body>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="744.09448819"
   height="1052.3622047"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.4 r9939"
   sodipodi:docname="mainscreen.svg">
  <defs
     id="defs4" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.7"
     inkscape:cx="175.99454"
     inkscape:cy="739.86976"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1366"
     inkscape:window-height="706"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <path
       sodipodi:type="arc"
       style="fill:#ff0000;fill-opacity:1;stroke:#495677;stroke-

width:23.16900062999999900;stroke-linecap:butt;stroke-

linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-

dasharray:none"
       id="circle1"
       sodipodi:cx="227.14285"
       sodipodi:cy="156.6479"
       sodipodi:rx="47.142857"
       sodipodi:ry="44.285713"
       d="m 274.28571,156.6479 a 47.142857,44.285713 0 1 1 -94.28571,0 

47.142857,44.285713 0 1 1 94.28571,0 z"
       inkscape:label="#path2985" />
    <rect
       style="fill:#ffff00;fill-opacity:1;stroke:#495677;stroke-

width:4.86899999999999980;stroke-linecap:round;stroke-

linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-

dasharray:none"
       id="box1"
       width="284.28571"
       height="110"
       x="312.85715"
       y="98.076469"
       inkscape:label="#box1" />
  </g>
</svg>

</body>
</html>

解決方案2
 1 已采納  2013-10-16 07:19:47

如果有兩個文件是可以接受的，您可以執行以下操作（在IE9中測試）。 在這種情況下，您將SVG保存為test.svg： 

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<object data='test.svg'></object>  



</body>
</html>

解決方案3
 0  2015-08-25 13:46:05

我只是遇到了同樣的問題 - 當代碼在HTML中內聯實現時，IE9拒絕從InkScape渲染svg。

問題是標簽<sodipodi:namedview以及此處的所有內容，直到結束標記/>

嘗試刪除它，我敢打賭，在IE9中調用HTML時，svg將呈現。

解決方案4
 0  2016-04-15 09:48:52

這是因為在IE9中無法識別inkscape和sodipodi ，特別是對於內聯SVG。 這就是他們需要被刪除的原因。 您可以參考此鏈接簡單SVG顯示

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 SVG懸停在IE9或Chrome中不起作用 CSS表布局在Chrome中無法在IE9中使用 HTML工作在chrome但不是ie jQuery在chrome中工作正常，在IE9 / IE8等環境中失敗 SVG未在IE9中顯示 顯示隱藏的div，為什么代碼可以在FF / Chrome中工作，但不能在IE9中工作？ jQuery zClip在Chrome和IE9的UI對話框中不起作用（在FireFox中有效） Gridview標題左對齊，在IE9上不起作用，但它適用於chrome 桌面 HTML 文件無法在 Chrome 中加載，但可以在 IE 中使用 SVG文件進入HTML頁面的位置很好的問題（由inkscape命令行制作的SVG）
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM