SVG标记没有出现?

时间:2014-02-22 05:20:31

标签: html css3 svg jquery-svg

以下是我的html svg。标记没有出现。

我的浏览器是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>

1 个答案:

答案 0 :(得分:1)

定位标记是建议的SVG2功能。我不知道是否有任何浏览器支持它们。