El atributo de inicio de marcador dibuja un polimarcador o punta de flecha en el vértice de inicio del elemento marcable con forma determinada. Excepto 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 de inicio de marcador se representa solo en el vértice de inicio de los datos de la ruta. La propiedad marker-mid solo tiene su efecto en los siguientes siete elementos: ruta, polilínea, polígono, línea, círculo, elipse y rect .
Sintaxis:
marker-start = "marker-reference | none"
Valores de propiedad: este atributo acepta dos valores, como se mencionó anteriormente y se describe a continuación.
- marcador-referencia: Dibuja un marcador en el vértice inicial de los elementos.
- ninguno: No agrega ningún marcador en el vértice de inicio del elemento.
Ejemplo 1: a continuación se muestra el código que ilustra el uso de la propiedad de inicio de marcador con el valor » ninguno». “
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.geeks {
stroke-width: 15;
stroke: green;
fill: none;
marker-start: none;
}
</style>
</head>
<body>
<div class="Container" style="
color: green; text-align:center;">
<h1>GeeksforGeeks</h1>
<svg>
<marker id="Triangle"
viewBox="0 0 10 10" refX="0"
refY="5" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z">
</path>
</marker>
<g class="geeks">
<path d="M 100, 75 C 125,
50 150, 50 175, 75">
</path>
</g>
</svg>
</div>
</body>
</html>
Producción:
Ejemplo 2: a continuación se muestra el código que ilustra el uso de la propiedad de inicio de marcador con el valor de referencia de marcador .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.geeks {
stroke-width: 10;
stroke: green;
fill: none;
}
</style>
</head>
<body>
<div class="Container" style="
color: green; text-align:center;">
<h1>GeeksforGeeks</h1>
<svg>
<marker id="Triangle"
viewBox="0 0 10 10" refX="0"
refY="5" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z">
</path>
</marker>
<g class="geeks" style=
"marker-start: url(#Triangle);">
<path d="M 100, 75 C
125, 50 150, 50 175, 75">
</path>
</g>
</svg>
</div>
</body>
</html>
Producción:
Navegadores compatibles:
- Cromo
- Firefox
- Borde
- Ópera
- Safari
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