Dev Faq
8
votes

Comment puis-je mélanger SVG et HTML dans une page?

J'utilise le jquery.svg plugin pour faire du rendu SVG et fonctionne Parfaitement mais je veux aussi que le serveur rend le serveur de SVG dans la page et je ne peux pas obtenir cela pour travailler. Comment puis-je ajouter des SVG comme ci-dessous dans la page de sorte que Firefox le rendrait? XXX

Dois-je avoir besoin d'une balise méta disant qu'il y a du contenu SVG dans la page ou de définir l'espace de noms SVG en quelque sorte ?

0 commentaires

4 Réponses :

1
votes

Voir ce lien (SVG dans l'introduction HTML @ Centre de Mozilla Developer).

Un exemple d'inline svg peut être vu ici .

4 commentaires

Je regarde ces liens et j'ai ajouté les références XMLNS qui manquaient et ne fonctionnent toujours pas. J'ai mis à jour la question avec une page HTML complète qui ne fonctionne pas, que manque-t-il?

Quels têtes d'en-tête votre serveur Web utilise-t-il? Voir cette page (malheureusement uniquement dans Google Cache: 74.125.77.132/search?q=cache :12yx1ebbv8cj:wiki.svg.org/... )

Assurez-vous que le serveur Web servant en tant que Application / XHTML + XML .

Merci Chris, c'était les en-têtes qui l'empêchaient de travailler

0
votes

Quel est votre DOCTYPE? Assurez-vous que c'est la même chose que l'exemple, c'est-à-dire I.E. XHTML, pas HTML 4.01 Transitional. XXX

0 commentaires
0
votes

Voici un exemple de bâtiment en ligne SVGS de manière dynamique avec JavaScript .

0 commentaires
1
votes

en 2020, en utilisant SVG code> dans HTML ou XHTML est maintenant possible dans tous les navigateurs.

Exemple de code HTML / SVG (2.0) que j'utilise P> 

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns:svg="http://www.w3.org/2000/svg">
<head> <title>SVG within XHTML Demo</title> </head>
<body>
  <p>
    <b>Electricity Plan</b>
  </p>
  <svg xmlns='http://www.w3.org/2000/svg' version='2.0' width='8000px' height='6000px'>
    <defs>
      <g id="prise">
        <line x1="0" y1="0" x2="20" y2="0" stroke="blue"/>
        <line x1="20" y1="-15" x2="20" y2="15" stroke="blue"/>
        <path d="m40,-20 a20,20 0 0,0 0,40" fill="none" stroke="blue"/>
        <line x1="40" y1="-20" x2="40" y2="-28" stroke="blue"/>
        <line x1="40" y1="20" x2="40" y2="28" stroke="blue"/>
      </g>
    </defs>
    <line x1='100' y1='50' x2='140' y2='50' stroke='blue'/>
    <use href='#prise' x='140' y='50'/>
  </svg>
</body>
</html>

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor