css - manipulation - svg web

Posicionamiento de elementos SVG usando CSS

Question

Supongamos el siguiente documento svg:

<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<text x="20" y="20">My text</text>
</svg>

Ahora lo que quiero hacer es reposicionar este texto usando css.

He intentado agregar style="dx:20" y style="transform: translate(20)" . Ambos no tienen ningún efecto en Firefox y Safari. Agregar estos atributos normales funciona bien, pero no puedo dividir el posicionamiento del código real. Establecer x , y , left y top en el estilo tampoco funciona.

¿Hay alguna manera de posicionar un elemento svg usando css?

Answer 1

Use el posicionamiento css:

index.html

<link href="style.css" rel="stylesheet" />
<div class="parent">
  <div class="child">
    <svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"><text x="20" y="20">My text</text>
    </svg>
  </div>
</div>

style.css

.parent {
  position: relative;
  height: 1000; /* bigger than your svg */
  width: 1000; /* bigger than your svg */
}

.child {
  position: absolute;
  top: 10px;  /* relative to parent container */
  left: 10px; /* relative to parent container */
}

Answer 2

Aquí hay una hacky posibilidad de posicionar específicamente elementos de texto puramente por CSS, abusando de los atributos ‘letter-spacing’ para la coordenada x y ‘baseline-shift’ para la coordenada y:

<defs>
    <font><font-face font-family="cssPosAnchor" />
        <glyph unicode="." horiz-adv-x="0" />
    </font>
    <style type="text/css"><![CDATA[
#cssPos {
    font-family:cssPosAnchor;
    letter-spacing:10px; /* x-coordinate */
}
#cssPos>tspan {
    font-family:serif;
    letter-spacing:normal;
    baseline-shift:-30px; /* negative y-coordinate */
}
]]>
    </style>
</defs>
<text id="cssPos">.<tspan>CSS-Positioned Text!</tspan></text>

''baseline-shift'' solo se aplica a los elementos ''tspan'' , lo que hace que el <tspan> interno <tspan> necesario en el código presentado. Los valores positivos para el cambio de línea base mueven el texto hacia arriba, opuesto a la dirección normal en el svg.

''espaciado de letras'' necesita una letra inicial para tener un efecto, lo que hace que . necesario. Para eliminar el ancho de esta primera letra, usamos la fuente especial cssPosAnchor , donde el punto no tiene ancho ni forma. El siguiente <tspan> restaura adicionalmente la fuente y el espaciado entre letras.

Alcance

Debería funcionar en cada implementación de SVG conforme.

Sin embargo, hay una limitación indefinida para las coordenadas x negativas. La especificación para el atributo ''espaciado entre letras'' dice: "Los valores pueden ser negativos, pero puede haber límites específicos de la implementación".

Compatibilidad

El cambio de ''dirección'' de texto debería funcionar bien, cuando se impone en el <tspan> .

Se debe imponer un ''modo de escritura'' no estándar en el <text> externo. Sin duda habrá problemas con eso.

Los valores probablemente más importantes de "anclaje de texto" en el medio y el final pueden ser posibles así:

<defs>
    <font><font-face font-family="cssPosAnchor" />
        <glyph unicode="." horiz-adv-x="0" />
        <glyph unicode=" " horiz-adv-x="0" />
    </font>
    <style type="text/css"><![CDATA[
#cssPos {
    font-family:cssPosAnchor;
    letter-spacing:100px; /* x-coordinate */
    word-spacing:-200px; /* negative double x-coordinate */
}
#cssPos>tspan {
    font-family:serif;
    word-spacing:normal;
    letter-spacing:normal;
    baseline-shift:-30px; /* negative y-coordinate */
}
#cssPos {
    text-anchor=middle;
}
]]>
    </style>
</defs>
<text id="cssPos">.<tspan>CSS-Positioned Text!</tspan> .</text>

El ‹space›. antes de que la etiqueta de cierre </text> produzca un espaciado igual a la coordenada menos x. Por lo tanto, el <tspan> se mueve pero conserva su espacio en el <text> como si aún estuviera allí.

Dado que puede haber límites específicos de implementación en valores negativos para los atributos de espaciado, ¡no se garantiza que esto funcione en todos los clientes!

Answer 3

Logré mover un poco de texto SVG en Chrome usando el siguiente CSS:

text.identity{
transform: translate(74px,0px);
-ms-transform: translate(74px,0px); /* IE 9 */
-webkit-transform: translate(74px,0px); /* Safari and Chrome */
-o-transform: translate(74px,0px); /* Opera */
-moz-transform: translate(74px,0px); /* Firefox */
}

Sin embargo, no se está moviendo en Firefox ...

Answer 4

Por el momento, parece que, según Shelley Powers , en su A List Apart Article " Uso de SVG para fondos flexibles, escalables y divertidos: Parte I " y " Parte II ", ese CSS no es actualmente el más adecuado para el posicionamiento de SVG . De hecho, parece ser todo un campo minado incorporar SVG en una página web, sin incrustarlo directamente dentro del html mismo.

Espero que haya soluciones para encontrar, y, de hecho, Powers ofrece un par de soluciones para permitir la separación adecuada de estilo y contenido para SVG. Me atrevería a adivinar que los problemas actuales son la relativa novedad del concepto / estándar (en relación con, por ejemplo, .gif o incluso .png ...), por desgracia.

Lo siento, no puedo ofrecer una mejor respuesta. = /

Answer 5

Te advierto que soy un principiante relativo, pero qué pasa con "x" e "y" y asignar estos con número y "px"

tal vez:

left: 290px;    top: 1200px;

o

x:30px; y:50px;

y

text-anchor:start;

Muestra:

<text
       xml:space="preserve"
       style="font-size:32;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Comic Sans MS;-inkscape-font-specification:Comic Sans MS Bold"
       x="131.42857"
       y="269.50504"
       id="text2383"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan2385"
         x="131.42857"
         y="269.50504">Position ze text</tspan></text>

Answer 6

Vine aquí buscando una solución, pero solucioné el problema yo mismo, pensé que lo compartiría:

transform: translate(100px, 100px)

Parece funcionar en todos los navegadores modernos, excepto en Internet Explorer, hasta Microsoft Edge (que aún no está disponible), lo cual es bastante decepcionante. Los elementos que he probado son:

<path>
<polygon>
<g>

El único problema que he tenido es con los elementos de <text> , y la solución es envolver el <text> en una <g> y aplicar la transformación a eso. Eso también debería funcionar para cualquier elemento que aún no haya probado que tenga problemas con transform: translate() .

No he encontrado una alternativa decente para Internet Explorer, en cambio me he asegurado de que las transformaciones no sean vitales para la función de SVG.

Answer 7

polígono r = "7" id = "map_points_55" points = "23,10 15,27 34,16 10,16 31,27" style = "fill: lime; trazo: morado; stroke-width: 0; fill-rule : no cero; "

si quieres mover la estrella, agrega 10 o más puntos como puntos = "33,20 25,37 44,26 20,26 41,37"