Question

follwing is my html svg. markers are not showing up.

my brower is CHROME.

      <style type="text/css"><![CDATA[
        .Border { fill:none; stroke:blue; stroke-width:1 }
        .Connect { fill:none; stroke:#888888; stroke-width:2 }
        .SamplePath { fill:none; stroke:red; stroke-width:5 }
        .EndPoint { fill:none; stroke:#888888; stroke-width:2 }
        .CtlPoint { fill:#888888; stroke:none }
        .AutoCtlPoint { fill:none; stroke:blue; stroke-width:4 }
        .Label { font-size:22; font-family:Verdana }
      ]]></style>

       <defs>
            <marker id="Square" markerWidth="10" markerHeight="10"
                    refX="5" refY="5" orient="auto">
              <path d="M 5,1 L 9,5 5,9 1,5 z" fill="#6a9100"/>
            </marker>
            <marker id="Circle" markerWidth="10" markerHeight="10"
                    refX="5" refY="5" orient="auto">
              <circle cx="5" cy="5" r="2" fill="dodgerblue"/>
            </marker>
      </defs>

      <path id="pathOne" class="SamplePath" d="M100,200 C100,100 250,100 250,200">
      <marker href="#Square" position="100%"/>
      </path>

      <path d="M 100,50 C 100,250 500,-50 300,150"
     fill="none" stroke="deeppink" stroke-width="3">
 <marker href="#Square" position="0"/>
 <marker href="#Square" position="100%"/>
 <marker href="#Circle" position="50px"/>
 <marker href="#Circle" position="calc(100% - 50px)"/>
 <marker refX="5" refY="5" position="50%">
   <!-- the cross -->
   <path d="M 3,3 L 7,7 M 3,7 L 7,3"
         fill="none" stroke="black" stroke-width="2"/>
 </marker>

Was it helpful?

Solution

Positioned markers are a proposed SVG2 feature. I don't know if any browser supports them yet.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top