El atributo markerWidth indica el ancho de la ventana gráfica dentro de la cual se ajustará el <marcador> cuando se muestre de acuerdo con los atributos preserveAspectRatio y viewBox. Solo el elemento <marker> está usando este atributo.
Sintaxis:
markerWidth = "length-percentage" | "number"
Valores de atributo: el atributo markerWidth acepta los valores mencionados anteriormente y descritos a continuación.
- porcentaje de longitud: indica un ancho relativo o absoluto del marcador.
- number: Indica el ancho del marcador en las unidades definidas por el atributo markerUnits .
Nota: El valor predeterminado del atributo markerWidth es 3.
Ejemplo 1: a continuación se muestran los ejemplos que ilustran el uso del atributo markerWidth .
HTML
<!DOCTYPE html> <html> <body> <h1 style="color: green; margin-left: 10px;"> GeeksforGeeks </h1> <svg viewBox="-20 -5 1220 520" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="geek" markerWidth="2.5" markerHeight="2.5" refX="1.5" refY="1.5"> <circle cx="6" cy="6" r="10" stroke="none" fill="yellow"/> </marker> </defs> <polyline points="20, 20 40, 25 60, 40 80, 120 120, 140 200, 180" style="fill:none;stroke:green; stroke-width:5" marker-mid="url(#geek)"/> </svg> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <body> <h1 style="color: green; margin-left: 10px; font-size: 25px;"> GeeksforGeeks </h1> <svg viewBox="0 15 1220 520" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="geek" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="strokeWidth" markerWidth="10" markerHeight="8" orient="auto"> <path d="M 0 0 L 10 5 L 0 10 z" fill="#008000"/> </marker> </defs> <polyline points="100, 105 180, 20 100, 17 50, 100" stroke="green" stroke-width="5" fill ="none" marker-start="url(#geek)"/> </svg> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA