标记端未显示

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" 并且 stroke-width 很细，因为标记很小，你看不到它。

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

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

标记端未显示

marker-end not getting displayed

html

css

svg

d3.js