Accepted answer
#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.


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.

Related Query