Je me demande s'il existe un moyen d'utiliser du HTML en ligne comme les éléments <sup> et <sub> en SVG?

Par exemple:

<svg>
  <text x="0" y="12">Some text with a superscript <sup>1</sup> and a subscript <sub>2</sub>.</text>
</svg>

Je ne trouve rien sur l'utilisation d'éléments HTML en ligne dans SVG. J'espère utiliser un exposant sans avoir à utiliser un style <tspan>.

3
Lady Aleena 20 avril 2020 à 18:14

3 réponses

Meilleure réponse

Une solution possible à votre problème consiste à utiliser les éléments tspan et l'attribut baseline-shift comme ceci:

tspan[baseline-shift]{font-size:50%;}
<svg viewBox="0 0 350 40">
  <text x="0" y="12">Some text with a superscript <tspan baseline-shift="super">1</tspan> and a subscript <tspan baseline-shift="sub">2</tspan>.</text>
</svg>
2
enxaneta 20 avril 2020 à 19:09

J'ai essayé beaucoup de choses pour obtenir l'exposant, et il n'est pas pris en charge de la même manière dans les navigateurs.

Pour Firefox ...

tspan.sup { font-size: 50%; dominant-baseline: hanging; }

Pour Chrome (et Inkscape) ...

tspan.sup { font-size: 50%; baseline-shift: super; }

Lorsque les deux styles sont utilisés, Chrome appliquera le baseline-shift, mais il ne sera pas entièrement en exposant. Inkscape appliquera correctement le baseline-shift même avec dominant-baseline présent. Il peut s'agir du choix du navigateur que vous souhaitez prendre en charge.

Et une méthode non-CSS.

<text x="0" y="14">Some text<tspan dy ="-10">1</tspan></text>

# If there is more text is after the tspan, do the following.

<text x="0" y="14">Some text<tspan dy ="-10">e</tspan> <tspan dy="10">with more text.</tspan></text>
0
Lady Aleena 30 avril 2020 à 15:36

Je ne trouve rien sur l'utilisation d'éléments HTML en ligne dans SVG. je suis dans l'espoir d'utiliser un exposant sans avoir à utiliser un style <tspan>.

Vous pouvez utiliser à ces fins: ForeignObject

<svg xmlns="http://www.w3.org/2000/svg" width="450" height="100">
 <style type='text/css'>
    svg { border: 1px solid black; }
    svg div {
    border: 1px dotted blue;
    padding:1em;
    }
  </style>
<foreignObject class="node" x="16" y="22" width="400" height="100">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <div>Some text with a superscript <sup>1</sup> and a subscript <sub>2</sub></div>
    </body>
  </foreignObject>
</svg>

Exemple d'habillage de texte multiligne en svg comme en HTML

svg {
border: 1px solid black;
}
svg div{
border: 1px dotted blue;
padding: 1em;
}
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="500">

<foreignObject class="node" x="46" y="22" width="200" height="500">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt dignissim nibh a facilisis. Phasellus pretium nisl vel turpis suscipit, quis posuere quam laoreet. Vestibulum fringilla porttitor felis, non lacinia dolor mattis vitae. Donec gravida et purus eu pellentesque. Nam consequat nisl id velit interdum eleifend. Mauris nulla turpis, sollicitudin in vestibulum nec, ornare quis lacus. </div>
</foreignObject>
</svg>
1
Alexandr_TT 21 avril 2020 à 08:17