El atributo de final de marcador dibuja un polimarcador o una punta de flecha en el último vértice de un elemento marcable con una forma determinada. Excepto para polilínea y ruta , el primer vértice es el mismo que el último vértice para todos los elementos marcables. En este caso, si el valor de marcador-inicio y marcador-final no es «ninguno», ambos marcadores se representarán en el último vértice. La propiedad del final del marcador solo se representa en el último vértice de los datos de la ruta. La propiedad marker-mid tiene su efecto solo en los siguientes siete elementos, que son ruta, polilínea, polígono, línea, círculo, elipse y rect.
Sintaxis:
marker-end = "marker-reference | none"
Valores de atributo: este atributo acepta dos valores, como se mencionó anteriormente y se describe a continuación.
- marcador-referencia: Dibuja un marcador en el último vértice de los elementos.
- none: No añade ningún marcador en el último vértice del elemento.
Ejemplo 1: a continuación se muestra el código que ilustra el uso de la propiedad de final de marcador con el valor de referencia de marcador .
HTML
<!DOCTYPE html> <html> <body> <div class="Container" style=" color: green; text-align: center;"> <h1>GeeksforGeeks</h1> <svg width="600px" height="100px"> <defs> <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth"> <path d="M0, 0 L0, 6 L9, 3 z" fill="#006400" /> </marker> </defs> <line x1="150" y1="50" x2="450" y2="50" stroke="#000" stroke-width="5" marker-end="url(#arrow)" /> </svg> </div> </body> </html>
Producción:
Ejemplo 2: a continuación se muestra el código que ilustra el uso de la propiedad de final de marcador con el valor «ninguno».
HTML
<!DOCTYPE html> <html> <body> <div class="Container" style=" color: green; text-align:center;"> <h1>GeeksforGeeks</h1> <svg width="600px" height="100px"> <defs> <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth"> <path d="M0, 0 L0, 6 L9, 3 z" fill="#006400" /> </marker> </defs> <line x1="150" y1="50" x2="450" y2="50" stroke="#000" stroke-width="5" marker-end="none" /> </svg> </div> </body> </html>
Producción:
Navegadores compatibles:
- Firefox
- Cromo
- Safari
- Borde
- Ópera
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