Tengo una svg <rect> que está en un <g> (grupo) y me gustaría escala y, a continuación, traducir por un porcentaje de la ventanilla. La mayoría de todo lo que en svg permite la especificación de las unidades a través de un ridículo número de opciones; por ejemplo, px, em, %, ex, pt, pc, … sin Embargo, parece que el número especificado en la traducción es de píxeles.

Cosa es que si tengo que ir de nuevo y volver a calcular los valores de los píxeles de la traducción, entonces mi svg se convierte en dependiente de la resolución. Entonces tú, yo, y todo el mundo estaría de obtener aspirado en una paradoja. Usted puede ver por qué estoy un poco preocupado.

<svg>
  <g transform="scale(1, 1) translate(0, 0)">
    <rect x="45%" y="25%" height="50%" width="10%"/>
  </g>
</svg>

http://jsbin.com/ubeqot/1/edit

  • Buen trabajo la articulación de la gravedad de la situación.
InformationsquelleAutor QueueHammer | 2013-06-13

1 Comentario

  1. 32

    Palo de la <g> elemento en su interior, una <svg> elemento y añadir x e y de los atributos con los valores de porcentaje para el interior <svg> elemento de traducir.

    <svg>
      <svg x="10%" y="20%">
        <g transform="scale(1, 1)">
          <rect x="45%" y="25%" height="50%" width="10%"/>
        </g>
      </svg>
    </svg>

    Si desea que la escala a aplicar en primer lugar poner el <svg> elemento dentro de la <g> lugar.

    • Tengo un circle dentro de la g elemento, y el círculo no estar centrados. ¿sabes por qué? ella simplemente se muestra un «corte» en la esquina superior izquierda. página de Prueba
    • Hacer una nueva pregunta con su marcado.
    • Aquí tienes el jefe – stackoverflow.com/q/33135429/104380
    • Y esa es la manera de hacer cosas complejas, aparentemente simple, impresionante!
    • lamentable hack es lamentable

Dejar respuesta

Please enter your comment!
Please enter your name here