logo标签列表

SVG标记在IE9-10中无法工作。

internet-explorersvg
8

我第一次在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中也无法正常工作。请求帮助，这是我的工作流编辑器遇到的唯一问题。以下是链接结果： enter image description here 在Firefox中，我的代码结果是： enter image description here 而在IE中，代码结果是（没有箭头，也没有方块）： enter image description here
7个回答
9
这个问题已经被报告给微软，如xdhmoore在他的回答中所述： https://connect.microsoft.com/IE/feedback/details/801938/dynamically-updated-svg-path-with-a-marker-end-does-not-update 这里有一个展示问题的fiddle： 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 个解决方法。让我想到你可能可以在不删除节点的情况下在两个标记之间进行切换：http://jsfiddle.net/2Qh3g/1/。然而，这种方法似乎比你的解决方案更容易出现抖动。 - xdhmoore
+1 个解决方法。但您不需要删除 SVG 元素。parent.appendChild(child) 就足以解决这个问题。 - Bharata
3
在IE中的一个问题似乎是marker继承了stroke、stroke-width和fill属性（与标准相反）。然而，可以通过显式地设置描边属性来解决这个问题。考虑以下问题：http://www.w3.org/TR/SVG11/images/painting/marker.svg。通过设置marker的stroke="none"和fill="black"，渲染似乎很好：https://codepen.io/anon/pen/qmYzGE。注意：我只在IE11中进行了测试。我猜想它至少也适用于IE10。任何相关信息都非常欢迎。
这对我来说似乎有效，（在我看来）应该选择作为首选答案，因为它是一个非常简单的修复。 - brennanyoung
2

我曾经遇到过同样的问题，它给我带来了很多困扰 - 我真的不明白为什么微软不修复它。我决定用自定义路径替换标记，这有一个好处，就是你可以使用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)';
    });

也许这会对某些人有所帮助 :)
0
在元素周围放置另一个组，并在该组内定义标记，在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>
0

对我来说，在IE10中，这个看起来渲染得很好（左侧有菱形，右侧有三角形）。

但是在IE中有一些已知的标记问题。例如，IE不支持markerUnits="strokeWidth"。

这里的“this”是链接示例还是我的代码？我附上了IE10中链接结果的图像。是否支持“makerUnits = userSpaceOnUse”？ - Shanta
“markerUnits =” userSpaceOnUse “在IE中（根据我的经验）运行良好。只有“strokeWidth”是有问题的。正如我所说，你的主要示例在IE中对我有效。你能发布一张你得到的图片吗？” - Paul LeBeau
我需要看一下你新示例的SVG代码。刚开始的那个示例（只有一行）在IE10中可以正常工作，就像我说的那样。 - Paul LeBeau
0

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

编辑：实际上，anything:id都可以工作。不确定为什么。

编辑2：糟糕。这会破坏Chrome中的SVG。您可以复制ID：id="foo" edge_sucks:id="foo"。

编辑3：嗯，撤销那个，看起来在Edge中也可以工作。不知道发生了什么。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接