marker-mid
Baseline
åºãå©ç¨å¯è½
ãã®æ©è½ã¯åºãå®è£ ããã¦ãããå¤ãã®ãã¼ã¸ã§ã³ã®ç«¯æ«ããã©ã¦ã¶ã¼ã§åä½ãã¾ãã2020å¹´7æ以éããã¹ã¦ã®ãã©ã¦ã¶ã¼ã§å©ç¨å¯è½ã§ãã
marker-mid å±æ§ã¯ãæå®ãããã·ã§ã¤ãã®ä¸éã®é ç¹ãã¹ã¦ã«æãããç¢å°ããã¼ã«ã¼ãå®ç¾©ãã¾ãã
ãã¼ã«ã¼ã¯ããã¹ãã¼ã¿ã®æåã¨æå¾ä»¥å¤ã®ãã¹ã¦ã®é ç¹ã«æç»ããã¾ãã
ã¡ã¢:
ãã¬ã¼ã³ãã¼ã·ã§ã³å±æ§ã§ããããã marker-mid ã«ã¯å¯¾å¿ãã CSS ãããã㣠marker-mid ãããã¾ãã両æ¹ãæå®ãããå ´åã CSS ããããã£ãåªå
ããã¾ãã
ãã®å±æ§ã¯æ¬¡ã® SVG è¦ç´ ã§ä½¿ç¨ã§ãã¾ãã
ä¾
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="circle" markerWidth="8" markerHeight="8" refX="4" refY="4">
<circle cx="4" cy="4" r="4" stroke="none" fill="red" />
</marker>
</defs>
<polyline
fill="none"
stroke="black"
points="20,100 40,60 70,80 100,20"
marker-mid="url(#circle)" />
</svg>
使ç¨ä¸ã®ã¡ã¢
| å¤ | none | <marker-ref> |
|---|---|
| æ¢å®å¤ | none |
| ã¢ãã¡ã¼ã·ã§ã³ | å¯ |
none-
æå®ãããé ç¹ã«ãã¼ã«ã¼è¨å·ãæç»ãã¦ã¯ãªããªããã¨ã示ãã¾ãã
<marker-ref>-
ãã®å¤ã¯
<marker>è¦ç´ ã¸ã®åç §ã§ãæå®ãããé ç¹ã«æç»ããããã®ã§ããåç §ãæå¹ã§ãªãå ´åã¯ããã¼ã«ã¼ã¯æç»ããã¾ããã
ä»æ§æ¸
| ä»æ§æ¸ |
|---|
| Scalable Vector Graphics (SVG) 2 # MarkerMidProperty |
ãã©ã¦ã¶ã¼ã®äºææ§
é¢é£æ å ±
<marker>marker-startmarker-end- CSS ã®
marker-midããããã£