0
233
VistasLíneas SVG con texto en la parte superior
Tengo una línea SVG y se mueve a través de js y quiero colocar un texto a lo largo de ella, así:
y cada vez que la línea se mueve, el texto debería moverse automáticamente junto con ella mientras permanece siempre en el centro de la línea sin importar la longitud
Intenté un enfoque ingenuo como este, pero obviamente no funcionó:
<svg height="210" width="500"> <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"> Hello there </line> </svg>¿es posible tal cosa o tendré que programar el texto para que se mueva también en javascript?
1 Respuestas
Responde la pregunta0
cada vez que la línea se mueve, el texto debería moverse automáticamente junto con ella
Creo que la forma más sencilla de hacerlo sería:
- agrupa la
<line>y el<text>juntos usando un<g>; y entonces - transición o anime el elemento
<g>con su javascript.
NB : he usado una animación CSS en lugar de javascript en el ejemplo a continuación, pero el principio se mantiene.
Ejemplo de trabajo:
svg { width: 500px; height: 210px; } g { transform-origin: 100%; animation: rotateGroup 3s linear infinite; } line { stroke: rgb(255,0,0); stroke-width: 4px; } text { fill: rgb(255, 0, 0); font-size: 36px; } @keyframes rotateGroup { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} } <svg viewBox="0 0 105 250"> <g> <line x1="0" y1="185" x2="200" y2="185" /> <text x="22" y="176">Hello there</text> </g> </svg>Nota adicional:
Mencionaste:
mientras permanece siempre en el centro de la línea sin importar la longitud
Para lograr esto, puede volver a calcular el valor x de <text> cada vez que vuelva a calcular los valores x1 y x2 de <line> .