svg 标记在 IE9-10 中不起作用答案

【问题标题】：svg marker does not work in IE9-10svg 标记在 IE9-10 中不起作用
【发布时间】：2023-03-31 23:43:02
【问题描述】：

第一次在 svg 上工作。我对“箭头状”路径有以下 svg 定义

<defs>
    <marker id="start" refX="1" refY="5" markerUnits="userSpaceOnUse" markerWidth="17" markerHeight="11" orient="auto">
        <path id="conditional"   d="M 0 6 L 8 1 L 15 5 L 8 9 L 1 5" fill="white" stroke="black" stroke-width="1" />
        <path id="default" d="M 5 0 L 11 10" fill="white" stroke="black" stroke-width="1" />
    </marker>
    <marker id="end" refX="15" refY="6" markerUnits="userSpaceOnUse" markerWidth="15" markerHeight="12" orient="auto">
        <path id="arrowhead" d="M 0 1 L 15 6 L 0 11z" fill="black" stroke="black" stroke-linejoin="round" stroke-width="2" />
    </marker>
</defs>
<g id="edge">
    <path id="bg_frame" d="M10 50 L210 50" stroke="black" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" marker-start="url(#start)" marker-end="url(#end)" />
    <text id="text_name" x="0" y="0" oryx:edgePosition="startTop"/>
</g>

但在 IE 9 或 IE 10 中路径末尾没有显示箭头

IE 不支持“三角形”还是代码有问题？

这里有一个例子，http://www.w3.org/TR/SVG11/images/painting/marker.svg 在 IE 中也不起作用。

请帮忙，这是我的工作流编辑器卡住的唯一一点。

链接结果

我的代码在 FF 中的结果是：

IE中的代码结果是（没有箭头，箭头末尾没有正方形）：

【问题讨论】：

标签： internet-explorer svg

【解决方案1】：

正如 xdhmoore 在他的回答中所写，该问题已报告给 Microsoft： https://connect.microsoft.com/IE/feedback/details/801938/dynamically-updated-svg-path-with-a-marker-end-does-not-update

有一个小提琴显示问题： http://jsfiddle.net/EEYZZ/

   //if (isIE10 || isIE11) {
       var parent = p1.parentNode;
       parent.removeChild(p1);
       parent.appendChild(p1);
   //}

我的解决方法是手动从 DOM 中删除节点并再次添加它，这将根据需要更新节点......不要谈论性能和其他东西，但我认为目前没有更好的方法来做到这一点。 (http://jsfiddle.net/kaljak/5zTv9/3/)

【讨论】：

+1 用于解决方法。让我想到你可以在两个标记之间交换而不是删除节点：jsfiddle.net/2Qh3g/1。但是，似乎比您的解决方案更紧张。
+1 用于解决方法。但是您不需要删除 SVG 元素。 parent.appendChild(child) 足以解决这个问题。

【解决方案2】：

IE 中的一个问题似乎是marker 继承了stroke、stroke-width 和fill 属性（与标准相反）。

但是，这可以通过显式设置笔触属性来解决。

考虑问题

http://www.w3.org/TR/SVG11/images/painting/marker.svg

通过设置标记 stroke="none" 和 fill="black" 渲染看起来不错：

https://codepen.io/anon/pen/qmYzGE

注意：我仅在 IE11 中对此进行了测试。我的猜测是它至少在 IE10 中也可以工作。非常欢迎任何有关此的信息。

【讨论】：

这似乎对我有用，应该选择 (IMO) 作为首选答案，因为它很容易解决。

【解决方案3】：

我遇到了同样的问题，这让我很头疼——我真的不明白为什么微软不解决这个问题。我决定用自定义路径替换标记，它具有很好的副作用，例如使用 JavaScript 在运行时更改填充或颜色。

我使用 d3 创建了我的 svg，边缘具有“edge-path”类，尖端具有“edge-tip”类。两条路径都是 svg:g 的子路径。边缘本身是一条样条曲线，因此为了旋转尖端，我采用最后 10 个像素的斜率。这几乎是用于更新箭头的代码，适用于 IE9-11：

edge.select('path.edge-tip')
     // the shape of the tip  
     .attr('d', 'M0,0L10,5L0,10Z')
     // move the tip to the end of the edge and rotate.
     .attr('transform', function(d) {
         var parent = d3.select(this).node().parentNode,
             path = d3.select(parent).select('path.edge-path').node(),
             pathLength = path.getTotalLength(),
             point1 = path.getPointAtLength(Math.max(0, pathLength - 10)),
             point2 = path.getPointAtLength(pathLength),
             vect = { x: point2.x - point1.x, y: point2.y - point1.y }
             l1 = vect.x * vect.x + vect.y * vect.y;
         l1 = Math.sqrt(l1);
         var angle = Math.acos(vect.x / l1);
         angle = 360 * (angle / (2*Math.PI));
         if (vect.y < 0) {
             angle = 360 - angle;
         }
         return 'translate(' + point1.x + ',' + (point1.y - 5) + ') rotate (' + angle +' 0 5)';
    });

也许它可以帮助某人:)

【讨论】：

【解决方案4】：

我在使用标记动态移动线条时遇到了问题。它们在页面加载时显示良好，但在 x/y 行属性更改时不会移动。

http://social.msdn.microsoft.com/Forums/ie/en-US/f772aab3-5ce3-4367-8eec-4fe58ad94b14/urgent-serious-bug-svg-marker-is-not-updating-when-changing-the-lines-xy-in-ie10?forum=iewebdevelopment

http://connect.microsoft.com/IE/feedback/details/801938/dynamically-updated-svg-path-with-a-marker-end-does-not-update

【讨论】：

【解决方案5】：

这在 IE10 中对我来说似乎渲染得很好（左侧为菱形，右侧为三角形）。

然而，在 IE 中存在一些与标记有关的已知问题。例如，IE 不支持 markerUnits="strokeWidth"。

【讨论】：

'this' 这是链接示例还是我的代码？我附上了我在 IE10 中获得的链接结果的图像。支持makerUnits=userSpaceOnUse？
markerUnits="userSpaceOnUse" 在 IE 中运行良好（根据我的经验）。只有"strokeWidth" 坏了。正如我所说，您的主要示例在 IE 中对我有用。你能贴一张你得到的照片吗？
我需要查看新示例的 SVG 代码。正如我所说，最初的示例（单行）在 IE10 中运行良好。

【解决方案6】：

在元素周围放置另一个组并在该组内定义标记在 MS Edge 和其他系统中有效。

     <g id="maszlinie" style="marker-start: url(#pf2); marker-end: url(#pf)">
     <g id="bline" transform="translate(0,-20)">
        <line class="masz" y2="365" y1="365" x2="415" x1="15">
     </g>
     </g>

【讨论】：

【解决方案7】：

我无法让标记在 IE11 中工作，但在 Edge 中它们可以工作。诀窍是对于内联 SVG，您需要使用 xml:id 作为标记，而不仅仅是 id。

编辑：实际上anything:id 有效。不知道为什么。

编辑 2：呃。这打破了 Chrome 中的 SVG。您可以复制 ID：id="foo" edge_sucks:id="foo"。

编辑 3：嗯，毕竟它似乎在 Edge 中工作。不知道发生了什么。

【讨论】：