Question

我正在制作一个带snapsvg的SVG并使用

生成路径

paper.path("M" + e.pageX + " " + e.pageY + "L20 20");

我有一个悬停事件，并且“selected”类被添加到路径

.selected类引用此标记

<defs>
    <marker id="knob" viewbox="0 0 10 10" refx="0" refy="5" markerunits="strokeWidth"    markerwidth="4" markerheight="3" orient="auto">
        <path d="M 0 0 L 10 5 L 0 10 z"></path>
    </marker>
</defs>

我正在将标记链接到类

<style> 
   .selected{
      stroke: #006600; 
      marker-mid:url(#knob); 
      marker-end:url(#knob); 
      marker-start:url(#knob); 
      fill: #00cc00; 
    }
</style>

由于某种原因，SVG不会更新和渲染标记。但是，当我从页面复制SVG并使用chrome开发人员工具将其粘贴回页面时，它会更新并显示标记。

有人知道为什么会这样做吗？

我制作了一个JSFiddle，其中包含一段随机废话我正在制作http://jsfiddle.net/XTD4x/

如果在“结果”窗口中单击，它将开始绘制一条线。单击以添加节点。双击以停止绘图。悬停以添加所选的课程

Answer 1

问题是您将<marker>元素（以及严格来说，<style>元素）放在错误的命名空间中。它需要进入SVG命名空间，但jQuery的函数如.prepend()将它放入HTML命名空间（因为它们依赖于.innerHTML，我猜）。因此，请使用.createElementNS()之类的DOM方法，或使用DOMParser，例如

$("svg defs").prepend(
  (new DOMParser()).parseFromString(
    '<svg xmlns="http://www.w3.org/2000/svg"><style type="text/css"> .selected{  stroke: #006600; marker-mid:url(#knob); marker-end:url(#knob); marker-start:url(#knob); fill: #00cc00; }</style><marker id="knob" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="auto"><circle cx="6" cy="6" r="5" /></marker></svg>', 
    "image/svg+xml"
  ).documentElement.childNodes
);

注意我将元素包装到一个完整的SVG文档中，以便我可以解析它。

Try the modified fiddle

Answer 2

第二个答案：在snapsvg生成的SVG之外定义标记，并将CSS放在外部样式表或snapsvg SVG之外的另一个<style>元素中。不需要JavaScript，无需解析和插入任何内容。

See another fiddle.

由于某种原因，SVG不会更新和渲染标记

2 个答案: