Est-il un moyen de la courbe de / arc de texte à l'aide de CSS3 / Toile

Je suis en train de faire un courbe texte effet à l'aide de CSS3, Canvas HTML, ou encore SVG (voir image ci-dessous par exemple)? Est-ce possible? Si oui, comment puis-je obtenir cet effet?

Mise à jour: Pour clarifier: Le texte qui va être appelée de cette façon dynamique.

Est-il un moyen de la courbe de /arc de texte à l'aide de CSS3 /Toile

tavmjong.free.fr/INKSCAPE/MANUAL/web/svg_tests.php montre ce que vous pouvez réaliser avec SVG. Un bon coup d'oeil à la source peut vous aider à trouver la solution
étrange question: quelle est cette police? C'est délicieux.
Ça fait un moment, mais je crois que c'est Futura.
merci beaucoup!
Espérons que cela va vous aider : stackoverflow.com/questions/7251177/...

InformationsquelleAutor gabriel | 2010-05-15

33

SVG prend en charge le texte sur un chemin directement, si elle n'est pas "plier" les glyphes individuels le long du chemin. Voici un exemple de la façon dont vous le créer:
```
...
<defs>
  <path id="textPath" d="M10 50 C10 0 90 0 90 50"/>
</defs>
<text fill="red">
  <textPath xlink:href="#textPath">Text on a Path</textPath>
</text>
...
```
- Pourquoi n'est-ce pas la réponse? Semble de loin la meilleure solution?
InformationsquelleAutor Phrogz

Vous pouvez certainement le faire avec de la toile, essayez ce code comme exemple:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Testing min-width and max-width</title>
    <style type="text/css">

    </style>

  </head>
  <body>
      <canvas id="cnv"></canvas>
      <script type="text/javascript" charset="utf-8">
          cnv = document.getElementById("cnv");
          cnv.width = 500;
          cnv.height = 300;
          ctx = cnv.getContext("2d");
          ctx.font = "bold 12px sans-serif";
          text = "abcdefghijklm"
          for (i = 0; i < text.length; i++) {
              ctx.fillText(text[i], 300, 100);
              ctx.rotate(0.1);
          }
      </script>
  </body>
</html>

Il ne fait pas exactement, mais je suis certain que vous allez réussir à modifier à votre assimiler 😉

Jette erreur Javascript dans IE8, mais fonctionne dans Chrome.
Pour IE, vous devez utiliser excanvas: check this out diveintohtml5.org/canvas.html#ie
Le SVG solution ci-dessous semble beaucoup plus facile. Pourquoi voudriez-vous le faire de cette façon?

InformationsquelleAutor Jakub Hampl

Ou vous pouvez le faire en utilisant un peu de CSS, mais je suis sûr que vous ne l'obtenez pas en cours d'exécution sur IE tout moment bientôt. D'autre part, le truc cool, c'est que le texte est sélectionnable 😀

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Testing min-width and max-width</title>
    <style type="text/css">
        .num1 {
            -webkit-transform: translate(0px, 30px) rotate(-35deg); 
        }
        .num2 {
            -webkit-transform: translate(0px, 25px) rotate(-25deg); 
        }
        .num3 {
            -webkit-transform: translate(0px, 23px) rotate(0deg); 
        }
        .num4 {
            -webkit-transform: translate(0px, 25px) rotate(25deg); 
        }
        .num5 {
            -webkit-transform: translate(0px, 30px) rotate(35deg); 
        }

       span {display: inline-block; margin: 1px;}
    </style>

  </head>
  <body>
    <div style="width: 300px; height: 300px; margin: 50px auto">
      <span class="num1">a</span><span class="num2">b</span><span class="num3">c</span><span class="num4">d</span><span class="num5">e</span>
    </div>
</body>
</html>

Franchement, je ne m'inquiète pas sur IE. Ceci est prévu pour un iPhone-site optimisé donc, je suis seulement inquiet à ce sujet s'affiche pas correctement dans Webkit. Je pourrais être en mesure de retirer ce que vous êtes suggérant d'un texte dynamique à l'aide d'un peu de JavaScript supercherie. Merci.
IE9+ prend en charge CSS3 transformations 2d et IE8 et au-dessous de l'appui de microsoft transformations de la matrice, mais ils sont un peu différentes dans la manipulation.
Oui et ce post est de 2 ans. Je crois que l'utilisation de la -ms- préfixe doit travaillent la plupart du temps, bien que je n'ai aucun moyen de le tester.

InformationsquelleAutor Jakub Hampl

8

Ce n'est pas un pur CSS solution mais CircleType.js fonctionne très bien pour les courbé texte.

http://circletype.labwire.ca/
- De grandes choses! Il fonctionne très facilement. Noter qu'il nécessite un autre plugin ("Lettering.js est nécessaire")
- c'est prendre beaucoup de temps à charger.
InformationsquelleAutor peterhry
3

Il y a un Plugin jQuery pour la courbe de texte à l'aide de CSS3 appelé arctext.js. C'est très bon et a un éventail d'options de configuration. Je suppose que cela ne fonctionne pas sur IE8, mais je suppose que la plupart CSS3 chose ne!

Il y a aussi une page de démonstration avec quelques exemple de cela dans l'action ici.

InformationsquelleAutor Mark Rhodes

<embed width="100" height="100" type="image/svg+xml" src="path.svg">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <path id="textPath" d="M10 50 C10 0 90 0 90 50"/>
    </defs>
  </svg>
</embed>

InformationsquelleAutor signano Anas

1

Vous pouvez essayer ce plugin jQuery http://codecanyon.net/item/jquery-text-arch/3669779

Il a beaucoup d'options pour la personnalisation de texte et d'arcs de texte cercles.

Fonctionne dans tous les principaux navigateurs et systèmes d'exploitation

InformationsquelleAutor Aleksandar Timic
0

J'ai été en mesure d'exécuter les exemples de
http://apike.ca/prog_svg_text.html dans Chrome, mais il ne fonctionne pas dans IE.

Vous pouvez utiliser SVGWeb, http://code.google.com/p/svgweb/

Alternativement, vous pouvez écrire votre propre image de la génération de l'utilitaire au serveur de site .NET/PHP) comme un Gestionnaire Http et de transmettre du texte, et qu'elle serait de retour GIF/PNG à l'aide de la bibliothèque graphique et le rendu de l'image à la volée pour vous.

InformationsquelleAutor Vishal Seth
0

Je me rends compte que ce n'est plus un an de retard, mais voici ma solution

JS Fiddle extrait de

il adapte le texte autour, mais je ne peux pas comprendre comment retourner les lettres verticalement le long du bas parce que j'ai vraiment vraiment vraiment la haine de la toile transformations et je ne peut pas envelopper la tête autour de la façon de faire deux rotations sur le texte (flip une fois le long de l'axe y, et une fois de plus sur le centre d'un cercle imaginaire).
- C'est de l'excellent travail. Avez-vous étendu à tous les ou faites une bibliothèque depuis 2011?
InformationsquelleAutor puk
0

Ce tutoriel vous montre exactement comment le faire en utilisant HTML5 et canvas. L'une des autres réponses, ci-dessus, a eu une idée similaire, l'utilisation de la toile.faire pivoter la méthode. On utilise de la toile.traduire des.

InformationsquelleAutor Simon Tewsi
0

J'ai utilisé le tutoriel mentionné ci-dessus (par Simon Tewsi) pour écrire une meilleure solution, concernant le crénage question. N'utilise pas de bibliothèque, pur JS.

Voir à http://jsfiddle.net/fidnut/cjccg74f/
```
function drawTextAlongArcInside(ctx, str, font, color, radius, angle, centerX, centerY, wspace)
```
Remarque: SI l'exigence que j'ai mis tout le code de JSFiddle ici aussi. Je ne pense pas que ce soit sage, trop de code, donc je suis en ajoutant seulement le nom de la fonction.

InformationsquelleAutor Rookie Vee

Vous pouvez utiliser SVG avec TextPath comme ceci:

HTML:

<html>
<head>
<script>
 function updateMessage(str) {
document.getElementById("MyMessage").textContent = str;
 }
</script>
</head>
<body >
<button onClick="updateMessage('The text has changed');">Change the text</button>
  <svg viewBox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <path id="CurvedPath"
          d="M 0 150 Q 325 50 650 150 " />
  </defs>
<text font-size="54" x='325' y='50'  text-anchor="middle"  fill="darkgreen" font-family=Arial,Helvetica  style="text-shadow: 2px 2px 3px gray;"
>       <textPath id='MyMessage' xlink:href="#CurvedPath" >
THIS TEXT IS CURVED
    </textPath>
  </text>
</svg>
</body>

</html>

InformationsquelleAutor Vereb

Vous devez vous connecter pour publier un commentaire.