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;

}

浏览器中的相应输出是： enter image description here

为什么箭头没有显示在每条路径的末尾？我无法找到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一样构建的富Web应用程序的上下文中，您需要设置<base>标记以使HTML5样式的导航工作，尝试以永久方式解决这个问题会变得很混乱。

在我的情况下，我正在处理的应用程序显示SVG-based interactive diagram builder，当我在其中选择元素时，它会更改应用程序网址。

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

$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是为了解释在触发$stateChangeSuccess事件后，DOM节点确实异步更改的事实。

标记结束未显示

2 个答案: