Css SVG线条标记在IE中的比例不同_Css_Internet Explorer_Svg

Css SVG线条标记在IE中的比例不同

css internet-explorer svg

Css SVG线条标记在IE中的比例不同,css,internet-explorer,svg,Css,Internet Explorer,Svg,我正在尝试将静态图像转换为更具动态性和可编辑性的SVG图像，以实现我正在开发的网站的某些功能。到目前为止还不错，我很快就把原始图像重新合成了，因为它大部分是线条。我发现了marker的功能，这在某些方面正是我所需要的。添加了代码，调整了设置，向我的同事展示了它，在FF上展示了图片之后，我得到了一个典型的问题“它在任何地方都能工作吗？”。启动了Chrome，看起来很好，启动了IE，猛然醒悟过来。所有的标记都是超大的四分之一圆，覆盖了图像的一半。圆被渲染得太大了。所以我开始摆弄设置，这样在IE中

我正在尝试将静态图像转换为更具动态性和可编辑性的SVG图像，以实现我正在开发的网站的某些功能。到目前为止还不错，我很快就把原始图像重新合成了，因为它大部分是线条。我发现了marker的功能，这在某些方面正是我所需要的。添加了代码，调整了设置，向我的同事展示了它，在FF上展示了图片之后，我得到了一个典型的问题“它在任何地方都能工作吗？”。启动了Chrome，看起来很好，启动了IE，猛然醒悟过来。所有的标记都是超大的四分之一圆，覆盖了图像的一半。圆被渲染得太大了。所以我开始摆弄设置，这样在IE中看起来很不错。切换到FF和标记，标记太小了

我尝试使用markerUnits“UserSpaceOnUse”，只是尝试了“preserveSpectratio=“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>

上一行在FF中很好地显示标记，但下一行没有，而在IE中，上一行显示过大的标记，下一行显示漂亮的标记

找到了很多关于IE中动画和标记的bug的帖子，但是找不到任何关于IE和其他浏览器中标记缩放的帖子。我是否错过了任何设置，或者我必须切换到使用和放置圆圈

提前感谢。

在我对您的示例的测试中，IE和Chrome实际上为标记绘制了相同大小的圆。区别在于IE和Chrome为标记的视图框和圆的笔划宽度选择了不同的默认值。IE中圆形状的剪裁是由于IE为视图框默认值。I中的超大尺寸E是由于IE默认的笔划宽度。如果您将圆的笔划更改为不同的颜色或不同的不透明度，则会更清楚发生了什么

在SVG中编码标记时，我喜欢在标记上显式设置viewBox，并在路径/形状上显式设置笔划和/或笔划宽度

<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，因为我的笔记本电脑上没有它。

在IE中使用标记单位让一切都变得很好，但在FF/Chrome中它们的比例却很小。因此IE必须以某种方式解释markerUnits属性。我想IE只是忽略了很多MarkerUnitsHanks。我天真地相信，至少在SVG之类的东西上，MS会跟上standards。这条线现在在IE9、IE11、FF和Chrome中看起来完全一样。省得我调整大约20个圆形对象。；）