标记结束未显示

Question

我有以下 html：

<div id="divVis2" class="divVis">
    <svg width="1540" height="345">
        <defs>
            <marker id="normal" viewBox="0 -5 10 10" refX="15" refY="-1.5" markerWidth="6" markerHeight="6" orient="auto">
                <path d="M0,-5L10,0L0,5"></path>
            </marker>
            <marker id="anomaly" viewBox="0 -5 10 10" refX="15" refY="-1.5" markerWidth="6" markerHeight="6" orient="auto">
                <path d="M0,-5L10,0L0,5"></path>
            </marker>
        </defs>
        <g>
            <path class="anomaly" marker-end="url(#anomaly)" d="M908.3739002256449,176.0182689704716L661.9527686239043,249.64760217208658"></path>
            <path class="normal" marker-end="url(#normal)" d="M660.4045373167714,246.37428873149702L879.5700343222044,98.59473202412175"></path>
            <path class="normal" marker-end="url(#normal)" d="M878.0019325543491,95.25420149730667L631.216835426003,167.4248240636326"></path>
        </g>
        <g>
            <g transform="translate(889.5195255254339,91.88595979689137)">
                <circle class="normal" r="12"></circle>
                <text x="0" y="4" class="normal">133</text>
            </g>
            <g transform="translate(619.6992424549181,170.7930657640479)">
                <circle class="normal" r="12"></circle>
                <text x="0" y="4" class="normal">134</text>
            </g>
            <g transform="translate(650.4550461135419,253.0830609587274)">
                <circle class="anomaly" r="12"></circle>
                <text x="0" y="4" class="normal">137</text>
            </g>
            <g transform="translate(919.8716227360072,172.5828101838308)">
                <circle class="normal" r="12"></circle>
                <text x="0" y="4" class="normal">136_1</text>
            </g>
        </g>
    </svg>
</div>

其对应的css为：

#divVis2 path {
    fill: none;
    /* stroke: #666; */
    stroke-width: 0.5px;
}

#divVis2 path.normal {
    stroke: #808080;
}

#divVis2 path.anomaly {
    stroke: red;
    stroke-width: 1.5px;
}

/* for the marker */
#divVis2 #normal {
    fill: black;
    stroke-width: 0.5px;
}

#divVis2 #anomaly {
    fill: red;
    stroke-width: 1.5px;
}

#divVis2 circle.normal  {
    fill: #ccc;
    stroke: #ffffff;
    stroke-width: 0.5px;
}


#divVis2 circle.anomaly {
    fill: #ff0000;
    stroke: #ffffff;
    stroke-width: 0.5px;
}


#divVis2 text.normal {
    font: 7px sans-serif;
    pointer-events: none;
    fill: black;
    text-anchor:middle;

}

#divVis2 text.label  {
    font: 9px sans-serif;
    pointer-events: none;
    fill: blue;
    text-anchor:middle;

}

浏览器中对应的输出为：

为什么箭头没有显示在每条路径的末尾？我无法在 css 选择器中找出问题。

这是一个 jsfiddle：http://jsfiddle.net/onh7t53o/

Answer 1

#divVis2 path {
    fill: none;
    /* stroke: #666; */
    stroke-width: 0.5px;
}

对标记的特异性高于

 #divVis2 #normal {
    fill: black;
    stroke-width: 0.5px;
}

所以标记路径是 fill="none" 并且笔划宽度很细，因为标记很小，你看不到它。

Answer 2

我在使用 <base> 标签的 Angular 应用程序中遇到了这个问题。在像基于 Angular 构建的富 Web 应用程序的上下文中，您需要设置 <base> 标记以使 HTML5 样式的导航工作，尝试以永久方式修复它可能会变得混乱。

在我的例子中，我正在开发的应用程序显示了一个 SVG-based interactive diagram builder，当我选择其中的元素时，它会更改应用程序的 URL。

我所做的是添加一个全局事件处理程序，它将修复页面中任何 <path> 元素中的所有 url(#...) 内联样式：

$rootScope.$on 'fixSVGReference', ->
    $('path').each ->
        $path = $ this
        if (style = $path.attr 'style')?
            $path.attr 'style', style.replace /url\([^)#]*#/g, "url(#{location.href}\#"

然后在关键的地方触发这个处理程序，比如当应用状态改变时（我用的是ui-router）

$rootScope.$on '$stateChangeSuccess', ->
    $timeout (-> $rootScope.$emit 'fixSVGReference'), 5

以及我知道的任何地方都会有这样的新/更新路径。这里，$timeout 是为了说明 DOM 节点确实在 $stateChangeSuccess 事件触发后的某个时间发生了异步更改。