Jak Mike Bostock udaje się zdobyć przyzwoite strzały w "512 ścieżkach do Białego Domu"?

Question

Podczas przeglądania 512 Paths to the White House widać, że strzałki dla każdej "ścieżki" są zawsze poprawnie wyświetlane, nawet w przeglądarce Internet Explorer 9. Jest to znany fakt, że IE (do 11) has problems rendering markers.

Skopiowałem prosty kod SVG od 1 do 1 z the graphic do fiddle, i tam to nie działa (testowane w IE9 + 10), strzałka jest renderowana jako kwadrat.

<svg height="650" width="970"> 
    <defs> 
     <marker orient="auto" viewBox="-.1 -5 10 10" id="g-arrowhead-rep"><path class="g-marker g-rep" d="M-.1,-4L3.9,0L-.1,4"></path></marker> 
    </defs> 
    <g> 
     <path style="stroke-width: 16.5px;" marker-end="url(#g-arrowhead-rep)" class="g-link g-dem" d="M416.75,0C416.75,60.5,148.43655105625137,60.5,148.43655105625137,121"></path> 
    </g> 
</svg> 

Nie mogłem znaleźć żadnych wskazówek w kodzie Bostocka (ale też nie przyjrzałem się bliżej). Jaką czarną magię wykorzystuje, aby wyświetlać się poprawnie?

Answer 1

Jest to staranna alokacja obowiązków wypełniania i obrysu wśród wielu klas kaskadowych, które dotyczą wykresu, ścieżki bryły strzałki, obiektu znacznika i definicji ścieżki w obiekcie znacznika.

Znaczniki działają w IE10 +, jeśli używa się opakowania bez wypełnienia, obrysu w ciele, ale użyj wypełnienia = coś i obrysu = brak w samej definicji ścieżki znacznika. na przykład

<svg height="650" width="970"> 
 
    <defs> 
 
     <marker orient="auto" viewBox="-.1 -5 10 10" id="g-arrowhead-rep"><path d="M-.1,-4L3.9,0L-.1,4" stroke="none" fill="blue"></path></marker> 
 

 
    </defs> 
 
    <g transform="translate(60,85)" fill="none"> 
 
     <path stroke="blue" stroke-width="16" marker-end="url(#g-arrowhead-rep)" d="M416.75,0C416.75,60.5,148.43655105625137,60.5,148.43655105625137,121"></path> 
 
    </g> 
 
</svg>