El atributo markerHeight indica la altura de la ventana gráfica en la que se ajustará el <marcador> cuando se muestre de acuerdo con los atributos preserveAspectRatio y viewBox. Solo el elemento <marker> está usando este atributo.
Sintaxis:
markerrHeight = "length-percentage" | "number"
Valores de atributo: el atributo markerHeight acepta los valores mencionados anteriormente y descritos a continuación.
- longitud-porcentaje: Indica una altura relativa o absoluta del marcador.
- number: Indica la altura del marcador en las unidades definidas por el atributo markerUnits .
Nota: El valor predeterminado del atributo markerHeight es 3.
Ejemplo 1: a continuación se muestran los ejemplos que ilustran el uso del atributo markerHeight .
HTML
<!DOCTYPE html> <html> <body> <h1 style="color: green; margin-left: 10px;"> 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="1" refY="5" markerUnits="strokeWidth" markerWidth="8" markerHeight="8" orient="auto"> <path d="M 0 0 L 10 5 L 0 10 z" fill="#008000"/> </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-end="url(#geek)"/> </svg> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <body> <h1 style="color: green; margin-left: 10px;"> 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="1" refY="5" markerUnits="strokeWidth" markerWidth="8" 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-end="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