我正在尝试从静态图像转换为更加动态和可编辑的 SVG 图像，以实现我正在处理的网站的某些功能。到目前为止一切顺利，我很快就得到了原始图像，因为它主要是线条。 我找到了标记功能，这在某些时候几乎是我所需要的。添加代码，调整设置，向我的同事展示它并得到典型的问题“它在任何地方都有效吗？”在 FF 上显示图像后。启动 Chrome，看起来不错，启动 IE，猛然惊醒。 所有标记都是超大的四分之一圆，覆盖了图像的一半。圆圈渲染得太大了。所以我开始摆弄设置，所以它在 IE 中看起来不错。切换到 FF，标记变得很小，它们消失了。
我尝试使用 markerUnits“UserSpaceOnUse”，只是尝试了“preserveAspectRatio="xMidYMid meet"，都无济于事。一个简单的线条和标记示例以及一个 fiddle 来演示这个问题
<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 中动画和标记的错误的帖子，但找不到任何关于 IE 和其他浏览器中标记缩放的信息。是否有任何我错过的设置，或者我是否必须切换到使用和放置圆圈？
提前致谢。
最佳答案
在我对您的示例的测试中，IE 和 Chrome 实际上为标记绘制了相同大小的圆圈。不同之处在于 IE 和 Chrome 为标记的 View 框和圆圈的笔划宽度选择了不同的默认值。 IE 中圆形的裁剪是由于 IE 对 viewBox 的默认设置。 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，因为我的笔记本电脑上没有它。
关于css - SVG 线标记在 IE 中的缩放比例不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33798460/