SVG行标记在IE

时间:2015-11-19 08:17:19

标签: css internet-explorer svg

我正在尝试从静态图像转移到更加动态和可编辑的SVG图像,以实现我正在开发的网站的某些功能。到目前为止这么好,我得到了原始图像非常快速地恢复,因为它主要是线条。  我找到了标记功能,这几乎是我在某些方面所需要的。添加了代码,调整后的设置,向同事展示并得到了典型的问题“它到处工作吗?”在FF上显示图像后。解雇了Chrome,看起来很漂亮,启动了IE,并且粗鲁的觉醒来了。  所有标记都是超大的四分之一圆,覆盖了图像的一半。圆圈变得太大了。所以我开始摆弄设置,所以它在IE中看起来不错。切换到FF和标记,它们已经消失了。

我尝试使用markerUnits“UserSpaceOnUse”,只是尝试了“preserveAspectRatio =”xMidYMid meet“,一切都无济于事。一个简单的线条和标记示例,用小提示来证明问题

<html>
 <body>
  <svg version="1.1" id="SVGStuff" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="150px" preserveAspectRatio="xMidYMid meet">
     <defs>
        <marker id="endPointsFF" markerWidth="10" markerHeight="10" refX="1" refY="1">
           <circle cx="1" cy="1" r="0.8" style="fill: #4141ff;" />
        </marker>

        <marker id="endPointsIE" markerWidth="12" markerHeight="12" refX="6" refY="6" markerUnits="userSpaceOnUse">
           <circle cx="6" cy="6" r="2" style="fill: #4141ff;" />
        </marker>   
     </defs>

     <line class="line" x1="50" y1="50" x2="150" y2="50" stroke="#4141ff" style="stroke-width:6; marker-start: url(#endPointsFF); marker-end: url(#endPointsFF)" />
     <line class="line" x1="50" y1="100" x2="150" y2="100" stroke="#4141ff" style="stroke-width:6; marker-start: url(#endPointsIE); marker-end: url(#endPointsIE)" />
  </svg>
 </body>
</html>

http://jsfiddle.net/p6jg0uwj/

上面一行显示FF中的标记,但下面没有显示标记,而在IE中,上面一行显示超大标记,下面一行显示好标记。

在IE中发现了很多关于动画和标记错误的帖子,但在IE和其他浏览器中找不到关于标记缩放的任何内容。有没有我想念的设置,或者我是否必须切换到使用和放置圆圈?

提前致谢。

1 个答案:

答案 0 :(得分:1)

在我测试您的示例时,IE和Chrome实际上为标记绘制了相同大小的圆圈。不同之处在于IE和Chrome为标记的视图框和圆形笔划宽度选择了不同的默认值。在IE中剪切圆形是由于IE的默认视频框。 IE中超大尺寸是由于IE的笔画宽度默认值。如果您将圆圈的笔划更改为不同的颜色或不同的不透明度,那么它将更清楚地发生了什么。

在SVG中编码标记时,我喜欢在标记上显式设置viewBox,并在路径/形状上显式设置笔触和/或笔触宽度。例如,以下内容在IE和Chrome中都显示相同的内容......

<svg version="1.1" id="SVGStuff" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="150px" preserveAspectRatio="xMidYMid meet">
    <defs>
        <marker id="endPointsAll" markerWidth="2" markerHeight="2" viewBox="0 0 10 10" refX="5" refY="5">
            <circle cx="5" cy="5" r="5" style="fill: #4141ff; stroke: none" />
        </marker>
    </defs>
    <line class="line" x1="50" y1="50" x2="150" y2="50" stroke="#4141ff" style="stroke-width:6; marker-start: url(#endPointsAll); marker-end: url(#endPointsAll)" />
</svg>

我没有测试FF,因为我的笔记本电脑上没有它。