snapsvg à .png avec la police personnalisée

<script type="text/javascript" src="snap.svg-min.js"></script> <style> @font-face { font-family: Avenir; src: url("/AvenirNextCondensed-DemiBold.otf") format("opentype"); } </style> <script> window.onload = function(){ //Start with a simple raphaelJs drawing var s = Snap('#svg', 200,200); var r = s.rect(4,4,192,192,100,100).attr({ stroke: '#1A171B', 'strokeWidth': 4, fill: 'FFDD00', 'opacity': 1.0 }); var t1 = s.text((200/2),(200/2)+20, "150"); t1.attr({ 'font-size': 110, 'font-family': 'Avenir', fill:'#3D3C3F', 'text-anchor':'middle' }); var t2 = s.text((200/2),(200/2)+75, "ex"); t2.attr({ 'font-size': 80, 'font-family': 'Avenir', fill:'#3D3C3F', 'text-anchor':'middle' }); document.getElementById('img').src = s.toDataURL(); } </script> <svg id="svg"></svg> <img id="img"></img>

Bonjour,snapsvg à .png avec la police personnalisée

Le "svg" dessine avec la police familiale correcte, mais le "img" ne le font pas. Voir le résultat ici: http://pictos.kagwalmina.fr/index3.html

Est-ce que mon code a tort ou est-ce un bug?

Merci pour votre aide.

Source

2017-10-11 Kagwalmina

Peut-être que la police personnalisée ne fonctionne pas, pouvez-vous essayer avec une police standard? –

expliquez votre question plus. vous rencontrez problème dans les polices lors de la conversion "svg en png"? – RashFlash

Bonjour. Oui, j'ai le problème lors de la conversion "svg en png". – Kagwalmina

Pour faire des œuvres polices personnalisées, assurez-vous de les ajouter dans votre « svg » en utilisant les balises « defs »

exemple:

<defs> 
    <font-face font-family="Knewave"> 
     <font-face-src> 
     <font-face-uri link:href="path_to_font/css/fonts/Knewave-Regular.ttf"> 
     </font-face-uri> 
     </font-face-src> 
    </font-face> 
</defs>

Et maintenant, quand vous convertissez votre SVG à l'image, il convient afficher la police correcte pour ce texte

Source

2017-10-19 02:47:25 RashFlash

snapsvg à .png avec la police personnalisée

Répondre

Questions connexes