svg marker

Solutions on MaxInterview for svg marker by the best coders in the world

showing results for - "svg marker"
Anna
22 Oct 2020
1<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
2  <defs>
3    <!-- simple dot marker definition -->
4    <marker id="dot" viewBox="0 0 10 10" refX="5" refY="5"
5        markerWidth="5" markerHeight="5">
6      <circle cx="5" cy="5" r="5" fill="red"/>
7    </marker>
8  </defs>
9
10  <!-- Data line with polymarkers -->
11  <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey"
12   marker-start="url(#dot)" marker-mid="url(#dot)"  marker-end="url(#dot)"/>
13  <!--
14    Marker attributes:
15	markerHeight - the height of the marker viewport, default value: 3
16	markerWidth - the width of the marker viewport, default value: 3
17	markerUnits - the coordinate system for the marker content and the attributes markerWidth and markerHeight
18				  possible values: userSpaceOnUse or strokeWidth,
19				  default value: strokeWidth
20	orient - the orientation of the marker relative to the shape it is attached to
21			 possible values: auto, auto-start-reverse, or <angle>;
22			 default value: 0
23	preserveAspectRatio - defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio,
24			              value format: "(none|xMinYMin|xMidYMin|xMaxYMin|xMinYMid|xMidYMid|xMaxYMid|xMinYMax|xMidYMax|xMaxYMax) (meet|slice)?",
25						  default value: xMidYMid meet
26	refX - the x coordinate for the reference point of the marker,
27		   possible values: left, center, right, or <coordinate>;
28		   default value: 0
29	refY - the y coordinate for the reference point of the marker,
30		   possible values: top, center, bottom, or <coordinate>;
31		   default value: 0
32	viewBox - defines the bound of the SVG viewport for the current SVG fragment,
33			  default value: none
34  -->
35</svg>
William
09 Jul 2017
1<text class="label" id="country-name" x="10" y="390"> </text>