堆栈内存溢出
  简体   繁体   English

Inkscape .HTML SVG文件适用于Chrome，但不适用于IE9

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

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

问题描述

I have the following Inkscape exported SVG: 我有以下Inkscape导出的SVG：

[TESTSVG.HTML] [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>

Save as an HTML file (TESTSVG.HTML), it works in Chrome but not in IE9. 保存为HTML文件（TESTSVG.HTML），它适用于Chrome，但不适用于IE9。 If you change the file name to .SVG (TESTSVG.SVG), it will work on both browsers. 如果您将文件名更改为.SVG（TESTSVG.SVG），它将适用于两种浏览器。

I need to make it work on IE9 using the HTML extension. 我需要使用HTML扩展使它在IE9上工作。

Tks for any help. 请求任何帮助。

4 个解决方案

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

You could add an HTML DTD like this and embed the SVG (works in IE10 - can't test in 9) should work I think 您可以添加这样的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

If it's acceptable to have two files, you can do the following (tested in IE9). 如果有两个文件是可以接受的，您可以执行以下操作（在IE9中测试）。 You'd save your SVG as test.svg in this case: 在这种情况下，您将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

I just had the same problem - IE9 refuses to render svg's from InkScape when the code is implemented inline in HTML. 我只是遇到了同样的问题 - 当代码在HTML中内联实现时，IE9拒绝从InkScape渲染svg。

The problem is the tag <sodipodi:namedview and everything in here until the closing tag /> 问题是标签<sodipodi:namedview以及此处的所有内容，直到结束标记/>

Try removing this and I bet the svg will render when the HTML is called in IE9. 尝试删除它，我敢打赌，在IE9中调用HTML时，svg将呈现。

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

It is because inkscape and sodipodi are not recognized in IE9, especially for inline SVGs. 这是因为在IE9中无法识别inkscape和sodipodi ，特别是对于内联SVG。 That's why they need to be removed. 这就是他们需要被删除的原因。 You can refer to this link Simple SVG Display 您可以参考此链接简单SVG显示

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 SVG悬停在IE9或Chrome中不起作用 - SVG hover not working in IE9 or Chrome CSS表布局在Chrome中无法在IE9中使用 - css table layout works in chrome not in IE9 HTML工作在chrome但不是ie - html works in chrome but not ie jQuery在chrome中工作正常，在IE9 / IE8等环境中失败 - jQuery works fine in chrome fails in IE9/IE8 etc SVG未在IE9中显示 - SVG not displaying in IE9 显示隐藏的div，为什么代码可以在FF / Chrome中工作，但不能在IE9中工作？ - Show hidden div, why code works in FF/Chrome but NOT in IE9? jQuery zClip在Chrome和IE9的UI对话框中不起作用（在FireFox中有效） - jQuery zClip not working in UI dialog in Chrome and IE9 (works in FireFox) Gridview标题左对齐，在IE9上不起作用，但它适用于chrome - Gridview header align to left, does not work on IE9, but it works on chrome 桌面 HTML 文件无法在 Chrome 中加载，但可以在 IE 中使用 - Desktop HTML file won't load in Chrome but works in IE SVG文件进入HTML页面的位置很好的问题（由inkscape命令行制作的SVG） - Issue with fine position for a SVG file into HTML page (SVG made by inkscape command line)
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM