web-dev-qa-db-fra.com

Texte du centre SVG en cercle

J'essaie de centrer le texte dans un cercle avec svg.

la taille du texte sera dynamique.

Merci Avi

plunker

Mon code:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 500 500">

  <g id="UrTavla">
      <circle style="fill:url(#toning);stroke:#010101;stroke-width:1.6871;stroke-miterlimit:10;" cx="250" cy="250" r="245">

      </circle>
      <text x="50%" y="50%" stroke="#51c5cf" stroke-width="2px" dy=".3em"> Look, I’m centered!Look, I’m centered! </text>
  </g>
</svg>
csssvg
44
אVי

Ajoutez simplement text-anchor="middle" à l'élément text.

Plunker

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 500 500">
  <g id="UrTavla">
    <circle style="fill:url(#toning);stroke:#010101;stroke-width:1.6871;stroke-miterlimit:10;" cx="250" cy="250" r="245">
    </circle>
    <text x="50%" y="50%" text-anchor="middle" stroke="#51c5cf" stroke-width="2px" dy=".3em">Look, I’m centered!Look, I’m centered!</text>
  </g>
</svg>
63
Weafs.py

Peut-être, pourrait-être utile aussi alignment-baseline = "middle", avec text-anchor = "middle":

  <text x="50%" y="50%" stroke="#51c5cf" stroke-width="2px" dy=".3em" text-anchor="middle" alignment-baseline="middle"> Look, I’m centered!Look, I’m centered! </text>

Voici une bonne ressource: http://apike.ca/prog_svg_text_style.html

À votre santé

13
Riccardo Volpe

La solution proposée et acceptée est INVALID lorsque vous souhaitez dessiner un circle qui n'est pas centré sur le conteneur!

En utilisant x="50%"y="50%" sur text La balise ne fonctionne que lorsque l'élément SVG contient un cercle centré sur viewPort.

Si vous souhaitez dessiner 3 cercles, vous devez également modifier les coordonnées du texte (x, y) afin qu'elles soient égales aux coordonnées du cercle (cx, cy), comme dans l'exemple suivant.

<svg height="350" width="350">
    <circle cx="110" cy="110" r="100"
            stroke="red"
            stroke-width="3"
            fill="none"
            />
    <text x="110" y="110" 
          text-anchor="middle"
          stroke="red"
          stroke-width="1px"
          > Label
    </text>
    <circle cx="240" cy="110" r="100" 
            stroke="blue" 
            stroke-width="3"
            fill="none"
            />
    <text x="240" y="110" 
          text-anchor="middle" 
          stroke="blue" 
          stroke-width="1px"
          > Ticket
    </text>
    <circle cx="170" cy="240" r="100" 
            stroke="green" 
            stroke-width="3" 
            fill="none"
            />
    <text x="170" y="240" 
          text-anchor="middle" 
          stroke="green" 
          stroke-width="1px"
          > Vecto
    </text>
</svg>

Remarque: J'ai proposé d'améliorer la réponse acceptée, mais celle-ci a été rejetée par l'auteur. Donc, je n'ai pas d'autre solution que d'afficher ma réponse!

11
schlebe

Une solution plus simple qui fonctionne avec des cercles non centrés consiste à insérer des cercles et des textes dans des groupes traduits.

De cette façon, vous n'avez pas besoin de répéter les coordonnées du texte.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Centered texts</title>
  </head>

  <body ng-controller="MainCtrl">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
      <g transform="translate(300, 300)" >
        <circle fill="none" stroke="black" stroke-width="1px" r="120"/>
        <text stroke="blue" stroke-width="1px" text-anchor="middle" alignment-baseline="central">Look, I’m centered!</text>
      </g>
      
      <g transform="translate(150, 150)" >
        <circle fill="none" stroke="black" stroke-width="1px" r="120"/>
        <text stroke="blue" stroke-width="1px" text-anchor="middle" alignment-baseline="central">Look, I’m also centered!</text>
      </g>
    </svg>
  </body>
</html>
4
Vinicius

il est très facile de centrer le texte dans un cercle SVG.

<svg height="300" width="300">
      <circle cx="120" cy="120" r="30%" fill="#117da9" />
      <text x="50" y="120" fill="white">Center Text in SVG Circle</text>
</svg>

Tout ce que vous avez à faire est de modifier les valeurs x et y des balises <text> jusqu'à ce que le texte donné s'aligne au centre du cercle. Par exemple, les valeurs x et y sont x = "50" y = "120"

0
supritha