SVG
マーカー

Android Angular 2 AngularJS CSS HTML Java Language JavaScript jQuery PHP Python Language
サーチ…


構文

  • <marker viewBox = " xy width height " refX = " xoffset " refY = " yoffset " orient = " orientation " ... オプションパラメータ >
  • マーカーを描く要素...
  • </marker >
  • < elementname marker-start = "url（ ＃markerid ）" />要素の先頭にマーカーを適用します
  • < elementname marker-mid = "url（ ＃markerid ）" />要素のセグメントの中央にマーカーを適用します
  • < elementname marker-end = "url（ ＃markerid ）" />要素の末尾にマーカーを適用します
  • マーカは<line> 、 <polyline> 、 <polygon> 、および<path>要素に適用できます

パラメーター

パラメータ詳細
viewBox マーカーを描画する要素の単位系を指定します。
refX マーカーを描画する座標系のx軸の距離は、デフォルトの描画点からオフセットされている必要があります。デフォルトは0です。
refY マーカーを描画するための座標系のy軸の距離は、デフォルトの描画点からオフセットする必要があります。デフォルトは0です。
オリエント値はautoまたはangle in degreesで、マーカーに適用される回転を指定します。他のすべての座標調整が行われた後に適用されます（viewBox、preserveAspectRaioおよびrefX、refY）。以下のための角度の0計算デフォルトはauto複雑です-詳細については、SVG仕様を参照してください。
マーカーユニット strokeWidthまたはuserSpaceOnUseです。デフォルトはstrokeWidthです。
markerWidth markerUnits内のマーカーの幅。デフォルトは3です。
markerHeight markerUnits内のマーカーの高さ。デフォルトは3

備考

スクリプティング：レンダリングされたマーカー要素はDOMでは公開されていないため、特定のレンダリングされたマーカーのプロパティや要素を調整することはできません（定義済みのマーカー要素をスクリプト化することは完全に可能です）。

マーカー要素のoverflowプロパティは自動的にhidden設定さhiddenます。これは、マーカータイルをオーバーフローする図面をクリップするものです。これは、CSSで明示的にvisibleに設定することができます。 2016年7月現在、Chromeではoverflow: visibleマーカーはサポートされていませんが、回避策はマーカー要素にフィルタを設定することです。オーバーフローのクリッピングを無効にするようです。

フィルタはマーカ内の要素に適用できます。スペックでは明示的に許可されていませんが、フィルターはマーカー要素自体に指定されている場合にも動作するように見えます。

マーカー要素の詳細については、SVG 1.1仕様のマーカーセクションを参照してください。

基本マーカー

これは、最小数のパラメーターで指定された終了マーカーの例です。元の要素のストロークカラーはマーカーによって継承されないことに注意してください。 

<svg width="800px" height="600px">
<defs>
      <marker id="examplemarker"
        viewBox="0 0 10 10" 
        refX="0" refY="5" 
        orient="auto">
        <path d="M 0 0 L 10 5 L 0 10 z" />
      </marker>
  </defs>
  
  <line x1="20" y1="20" x2="300" y2="300" stroke-width="8" stroke="blue" marker-end="url(#examplemarker)" />
</svg>

レンダリングされたマーカー

refX、refYおよびorientに対する代替値の影響

refXとrefY指定されたマーカーを描画する軸のオフセットは、 orientパラメータで指定された回転の前に適用されます。以下は、様々な組み合わせの効果を見ることができorientとrefX 、 refYこれを説明します。 

<svg width="800px" height="600px">
<defs>
      <marker id="marker1"
      viewBox="0 0 10 10" refX="0" refY="5" orient="auto" >
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
      <marker id="marker2"
      viewBox="0 0 10 10" refX="0" refY="0" orient="0" >
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
      <marker id="marker3"
      viewBox="0 0 10 10" refX="20" refY="20" orient="0" >
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
      <marker id="marker4"
      viewBox="0 0 10 10" refX="20" refY="20" orient="180" >
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
  </defs>
  
  <line  x1="20" y1="20" x2="100" y2="100" stroke-width="8" stroke="blue" marker-end="url(#marker1)" />
  
  <text x="20" y="150"> refX,Y  (0,5) orient (auto) </text>
  
  <line  x1="220" y1="20" x2="300" y2="100" stroke-width="8" stroke="blue" marker-end="url(#marker2)" />
  
    <text x="220" y="150"> refX,Y  (0,0) orient (0) </text>
  
  <line  x1="20" y1="220" x2="100" y2="300" stroke-width="8" stroke="blue" marker-end="url(#marker3)" />
  
      <text x="20" y="390"> refX,Y  (20,20) orient (0) </text>
  
  <line  x1="220" y1="220" x2="300" y2="300" stroke-width="8" stroke="blue" marker-end="url(#marker4)" />
  
      <text x="220" y="390"> refX,Y  (20,20) orient (180) </text>
</svg>

さまざまなrefX、refY、およびangleの効果

markerUnits、markerWidth、markerHeightの代替値の影響

描画マーカーのデフォルトは呼び出し要素のストローク幅を使用することですが、 markerUnits="userSpaceOnUse"指定することで、マーカーが適用されている要素の単位システムを使用してマーカーを描画するよう明示的に指定できます。マーカーは3x3 markerUnitsボックスに描画されます（markerUnitsが指定されていない場合は3ストローク幅）。しかし、ボックスの幅と高さは、 markerHeightとmarkerWidth明示的に指定できます。 markerUnits 、 markerHeight 、およびmarkerWidthのさまざまな組み合わせの影響については、以下を参照してください。 

<svg width="800px" height="600px">
<defs>
      <marker id="marker1"
      viewBox="0 0 10 10" refX="0" refY="5" orient="auto" markerUnits="strokeWidth" markerWidth="1" markerHeight="1">
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
      <marker id="marker2"
      viewBox="0 0 10 10" refX="0" refY="5" orient="auto" markerUnits="strokeWidth" markerWidth="4" markerHeight="4">
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
      <marker id="marker3"
      viewBox="0 0 10 10" refX="0" refY="5" orient="auto" markerUnits="userSpaceOnUse" markerWidth="15" markerHeight="15">
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
      <marker id="marker4"
      viewBox="0 0 10 10" refX="0" refY="5" orient="auto" markerUnits="userSpaceOnUse" markerWidth="30" markerHeight="30">
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
  </defs>
  
  <line  x1="20" y1="20" x2="100" y2="100" stroke-width="8" stroke="blue" marker-end="url(#marker1)" />     
    <text x="20" y="150"> markerUnits = strokeWidth </text>
    <text x="20" y="170"> markerWidth|Height = 1 </text>
  
  <line  x1="220" y1="20" x2="300" y2="100" stroke-width="8" stroke="blue" marker-end="url(#marker2)" />      
    <text x="250" y="150"> markerUnits = strokeWidth </text>
    <text x="250" y="170"> markerWidth|Height = 4 </text>
  
  <line  x1="20" y1="220" x2="100" y2="300" stroke-width="8" stroke="blue" marker-end="url(#marker3)" />      
      <text x="20" y="390"> markerUnits = userSpaceOnUse </text>
      <text x="20" y="410"> markerWidth|Height = 15 </text>
  
  <line  x1="220" y1="220" x2="300" y2="300" stroke-width="8" stroke="blue" marker-end="url(#marker4)" />      
      <text x="250" y="390"> markerUnits = userSpaceOnUse </text>
      <text x="250" y="410"> markerWidth|Height = 30 </text>
</svg>

ここに画像の説明を入力

線、ポリライン、ポリゴン、およびパスの各要素の開始マーカー、中間マーカー、終了マーカー

要素には、開始マーカー、終了マーカー、終了マーカーを個別に指定できます。以下は、マーキングできるすべての要素の開始マーカー、終了マーカー、終了マーカーの例です。 Chromeは現在、ポリゴンの開始マーカーと終了マーカー（ バグ＃633012 ）に対して自動方向を正しく計算していません（ バグ＃633012 ）。また、円弧パスセグメントの中央マーカーも正しく配置されません（ バグ＃583097 ） 

<svg width="800px" height="600px">
<defs>
      <marker id="red-chevron"
      viewBox="0 0 10 10" refX="5" refY="5" orient="auto" >
         <path d="M 0 0 L 10 5 L 0 10" fill="none" stroke="red" />
      </marker>

      <marker id="black-arrow"
      viewBox="0 0 10 10" refX="0" refY="5" orient="auto">
         <path d="M 0 0 L 10 5 L 0 10 z" />
      </marker>

      <marker id="red-circle"
      viewBox="0 0 10 10" refX="5" refY="5" orient="auto" >
         <circle fill="red" cx="5" cy="5" r="5" />
      </marker>
  </defs>
  
  <line  x1="20" y1="20" x2="100" y2="100" stroke-width="8" stroke="blue" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)" />
  <text x="20" y="150"> line: marker-mid not applied</text>
  
  <polyline  points="220,20 300,100 400,20" fill="none" stroke-width="8" stroke="blue" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)" />
    <text x="250" y="150"> polyline </text>
   
  <polygon  points="20,190 100,200 150,300 100,350 20,260" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)" fill="none" stroke-width="5" stroke="black" />
   <text x="20" y="390"> polygon: end/start overlap </text>
      
  <path d="M250,350 l 25,-25 
        a15,5 -16 0,1 10,-15 l 20,-5 
        a15,10 -16 0,1 10,-15 l 20,-5 
        a15,25 -16 0,1 10,-15 l 20,-5 
        a15,35 -16 0,1 10,-15 l 20,-5"
        fill="none" stroke="green" stroke-width="2" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)"  />
      <text x="250" y="390"> path with arc segments </text>
</svg>

適用可能なすべての図形上のマーカーのレンダリング



Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow