【问题标题】:SVG element doesn't appear in IE 11?SVG 元素没有出现在 IE 11 中?
【发布时间】:2019-05-02 12:10:59
【问题描述】:

当然,我在使用 IE 时遇到了问题。 SVG 元素不会出现在浏览器中。有人可以帮我吗?

这是我的代码

svg(preservAspectRatio='none', length='rem(250px)', height='1px', viewbox='0 0 250 1', version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink')
    defs
    g#Page-1(stroke='none', stroke-width='1', fill='none', fill-rule='evenodd', opacity='0.400000006', stroke-dasharray='10,10', stroke-linecap='square')
        g#Pre-Order(transform='translate(-505.000000, -1162.000000)', stroke='#7A8EA5')
            g#Group-6(transform='translate(475.000000, 1135.000000)')
                path#Line(d='M30.5,27.5 L949.606631,27.5')`

【问题讨论】:

  • 我相信 IE11 需要同时设置宽度和高度,但我可能错了。我不熟悉这种标记风格,但length 有效吗?还是应该是width?另外,height 设置为1px,对吗?您只会看到 1px x 250px 的图像?
  • 这不是有效的 SVG。无论是哪种模板语言,都应该作为标签添加。

标签: internet-explorer svg internet-explorer-11


【解决方案1】:

可以用纯SVG?
根据 SVG 语法规则重写代码。
该应用程序适用于所有浏览器。

<svg width="250" height="1", viewbox='0 0 250 1' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
   
    <g id="Page-1" stroke='none' stroke-width='1', fill='none' fill-rule='evenodd' opacity='0.4', stroke-dasharray='10,10' stroke-linecap='square'>
        <g id="Pre-Order" transform='translate(-505.000000, -1162.000000)' stroke='#7A8EA5')>
            <g id="Group-6" transform='translate(475.000000, 1135.000000)'>
                <path id="#Line" d='M30.5,27.5 L949.606631,27.5'> </path>  
            </g>
            </g>
            </g>
                </svg>

如果我理解正确,你想在这里得到一些东西是一个更短的代码:

<svg width="250" height="1", viewbox='0 0 250 1' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> 
    
    <g id="Page-1" stroke='black' stroke-width='1', fill='none' fill-rule='evenodd' opacity='0.4',    stroke-dasharray='10,10' stroke-linecap='square'>
               <path id="#Line" d='M0 1 L250 1'> </path>  
     </g>
 </svg>

【讨论】:

  • @paveldub 如果答案对您有用,请不要忘记检查它(答案编号旁边的复选标记)
猜你喜欢
  • 2015-01-03
  • 2017-06-09
  • 2015-08-19
  • 1970-01-01
  • 2015-03-08
  • 1970-01-01
  • 2015-02-17
  • 2019-09-13
  • 1970-01-01
相关资源
最近更新 更多