El atributo marker-mid dibuja un polimarcador o punta de flecha en todos los vértices (se excluyen el primer y el último vértice) del elemento marcable con forma dada. La propiedad marker-mid tiene su efecto solo en los siguientes siete elementos que son path, polyline, Polygon, Line, Circle, Ellipse y Rect .
Sintaxis:
marker-mid = "marker-reference | none"
Valores de propiedad: este atributo acepta dos valores, como se mencionó anteriormente y se describe a continuación.
- marcador-referencia: este parámetro dibuja un marcador en los vértices de elementos marcables que no sean el primero y el último vértices.
- none: No añade ningún marcador en los vértices.
Ejemplo 1: a continuación se muestra el código que ilustra el uso del atributo marcador-medio con valor ninguno.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#Arrow {
stroke-width: 20;
stroke: green;
fill: none;
marker-mid: 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="L 0 0 L 10 5 L 0 10 z">
</path>
</marker>
<g id="Arrow">
<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 del atributo de marcador medio con el valor de referencia de marcador .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#Arrow {
stroke-width: 20;
stroke: rgb(30, 236, 30);
fill: none;
marker-mid: url("#Triangle");
}
</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 id="Arrow">
<path d="M 100, 75 C 125,
50 150, 50 175, 75">
</path>
</g>
</svg>
</div>
</body>
</html>
Producción:
Navegadores compatibles:
- Cromo
- Firefox
- Ópera
- Safari
- Borde
- explorador de Internet
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