【问题标题】:SVG markers are not showing up?SVG 标记没有出现?
【发布时间】:2014-03-23 21:25:08
【问题描述】:

以下是我的 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>

【问题讨论】:

    标签: html css svg jquery-svg


    【解决方案1】:

    定位标记是一项提议的 SVG2 功能。不知道有没有浏览器支持。

    【讨论】:

    • 这出乎意料。
    猜你喜欢
    • 2019-12-20
    • 1970-01-01
    • 2015-05-18
    • 1970-01-01
    • 2021-01-08
    • 1970-01-01
    • 2020-08-22
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多