marker-end not getting displayed - html

Question

I have a following 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>
Its corresponding css is:
#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;
}
The corresponding output in browser is:
Why are the arrows not getting displayed at the end of each path? I am unable to find out the problem in css selectors.
Here is a jsfiddle: http://jsfiddle.net/onh7t53o/

Answer 1

#divVis2 path {
fill: none;
/* stroke: #666; */
stroke-width: 0.5px;
}
has a higher specificity for the markers than
#divVis2 #normal {
fill: black;
stroke-width: 0.5px;
}
so the marker paths are fill="none" and the stroke-width is so thin because the markers are small that you can't see it.

Answer 2

I had this problem in an angular app that was using a <base> tag. In the context of a rich web app like one built on Angular, where you need to set the <base> tag to make HTML5-style navigation work, it can get messy to try to fix that in a permanent way.
In my case, the app I was working on was showing a SVG-based interactive diagram builder that would change the app url as I selected elements therein.
What I did was to add a global event handler that would fix all url(#...) inline styles in any <path> element found in the page:
$rootScope.$on 'fixSVGReference', ->
$('path').each ->
$path = $ this
if (style = $path.attr 'style')?
$path.attr 'style', style.replace /url\([^)#]*#/g, "url(#{location.href}\#"
Then trigger this handler in key places, like when the app state changes (I'm using ui-router)
$rootScope.$on '$stateChangeSuccess', ->
$timeout (-> $rootScope.$emit 'fixSVGReference'), 5
As well as anywhere where I know there'd be new/updated paths like these. Here, the $timeout thing is to account for the fact that the DOM nodes really are changed asynchronously sometime after the $stateChangeSuccess event is triggered.