0
219
ViewsSVG: posición del grupo con respecto a otro grupo
Estoy haciendo un componente de línea de tiempo:
El "marcador" (círculo con flecha) es un grupo con un círculo y un camino dentro.
Quiero poder mover el marcador para que coincida con los otros círculos blancos según sea necesario con JS (Angular), pero el círculo y la ruta utilizan la posición desde la parte superior izquierda de todo el SVG. Parece que no puedo mover la posición X del grupo marcador.
Si configuro la X del grupo, la obra de arte interior permanece donde se creó.
¿Es esto posible dentro de un archivo SVG? ¿Cómo crearía un marcador donde el círculo y la ruta sean relativos a la parte superior izquierda del grupo ?
<svg version="1.1" id="timeline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="250px" viewBox="0 0 225 26" > <defs> <filter id="markerShadow"> <feDropShadow dx="0" dy="0" stdDeviation="1" flood-color="#000000" flood-opacity="0.5" /> </filter> </defs> <g id="seg3"> <path class="empty" d="M218,6h-70v14h70c3.9,0,7-3.1,7-7S221.9,6,218,6z" /> </g> <g id="seg2"> <rect x="77" y="6" class="empty" width="71" height="14" /> </g> <g id="seg1"> <path class="empty" d="M7,6c-3.9,0-7,3.1-7,7s3.1,7,7,7h70V6H7z" /> </g> <circle id="dot4" class="dot" cx="218" cy="13" r="5" /> <circle id="dot3" class="dot" cx="148" cy="13" r="5" /> <circle id="dot2" class="dot" cx="78" cy="13" r="5" /> <circle id="dot1" class="dot" cx="7" cy="13" r="5" /> <g id="marker"> <circle class="progress marker" cx="148" cy="13" r="10" style="filter: url(#markerShadow)" /> <polygon class="arrow" points="146.5,18.1 145.1,16.7 149.1,12.5 145.1,8.7 146.5,7.3 151.9,12.5 " /> </g> </svg>1 answers
Answer question0
Estoy poniendo el marcador en el <defs> asegurándome de que tiene el centro en el punto 0,0. Para esto estoy traduciendo el grupo transform="translate( -148, -13)"
Ahora puedo usar el grupo con <use> . El elemento use puede tomar atributos ax e y. Puede establecer los valores de x e y para que coincidan con cx y cy de los puntos.
circle{fill:gold} <svg id="timeline" width="250px" viewBox="0 0 230 26" > <defs> <filter id="markerShadow"> <feDropShadow dx="0" dy="0" stdDeviation="1" flood-color="#0000ff" flood-opacity="0.5" /> </filter> <g id="marker" transform="translate( -148, -13)"> <circle class="progress marker" cx="148" cy="13" r="10" style="filter: url(#markerShadow)" /> <polygon class="arrow" points="146.5,18.1 145.1,16.7 149.1,12.5 145.1,8.7 146.5,7.3 151.9,12.5" fill="white" /> </g> </defs> <g id="seg3"> <path class="empty" d="M218,6h-70v14h70c3.9,0,7-3.1,7-7S221.9,6,218,6z" /> </g> <g id="seg2"> <rect x="77" y="6" class="empty" width="71" height="14" /> </g> <g id="seg1"> <path class="empty" d="M7,6c-3.9,0-7,3.1-7,7s3.1,7,7,7h70V6H7z" /> </g> <circle id="dot4" class="dot" cx="218" cy="13" r="5" /> <circle id="dot3" class="dot" cx="148" cy="13" r="5" /> <circle id="dot2" class="dot" cx="78" cy="13" r="5" /> <circle id="dot1" class="dot" cx="7" cy="13" r="5" /> <use xlink:href="#marker" x="218" y="13" /> </svg>