Positionnement des éléments SVG à l'aide de CSS

J'ai réussi à déplacer certains SVG texte dans google chrome en utilisant le code CSS suivant:

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 */
}

Cependant, il n'est pas extensible dans Firefox...

Ici est un hacky possibilité de positionner précisément le texte-éléments purement CSS, en abusant des attributs ‘letter-spacing’ pour la coordonnée x et de référence-shift’ pour la coordonnée 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>

de référence-shift’ est applicable seulement sur ‘tspan’ Éléments, ce qui rend l'intérieur <tspan> nécessaires dans le code. Les valeurs positives de référence de base-maj déplacer le texte vers le haut, à l'opposé de la direction normale dans le svg.

‘letter-spacing’ besoin d'une lettre de mise en demeure pour avoir un effet, et donc de faire de la . nécessaire. Pour éliminer la largeur de cette première lettre, nous utilisons la spéciale de la police cssPosAnchor, où la dot n'a pas de largeur et pas de forme. La suite <tspan> en outre restaure la police et de la lettre de l'espacement.

Portée

Devraient travailler dans tous conformes SVG mise en œuvre.

Il y a une limitation de durée indéfinie, bien que pour x négatif coordonnées. Le cahier des charges pour l' ‘letter-spacing’ attribut dit: “les Valeurs peuvent être négatives, mais il peut y avoir la mise en œuvre des limites spécifiques.”

Compatibilité

Texte ‘direction’ changement devrait fonctionner très bien, lorsqu'il a lieu à l'intérieur <tspan>.

Un non-standard ‘writing-mode’ doit être imposée à l'extérieur sur le <text>. Il y aura très certainement des problèmes avec ça.

Probablement le plus important " texte d'ancre’ valeurs milieu et fin peut être rendue possible comme ceci:

<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>

La ‹space›. avant la fermeture <\text> étiquette de produit espacement égal à moins abscisse. Si l'intérieur <tspan> est déplacé autour de mais la préserve de l'espace dans le <text> comme si elle était encore là.

Puisqu'il peut y avoir la mise en œuvre des limites spécifiques sur des valeurs négatives pour l'espacement des attributs, ce n'est pas garanti sur tous les clients!

Utiliser les css de positionnement:

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 */
}

Je vous préviens je suis un parent débutant, mais que dire de "x" et "y" et l'attribution de ces avec le numéro et le "px"

peut-être:

left: 290px;    top: 1200px;

ou

x:30px; y:50px;

et

text-anchor:start;

Exemple:

<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>