J'essaie de créer un triangle SVG rempli qui sera placé à certains placer sur la page. Pour accomplir cela, j'enveloppe le SVG dans un div et placez la divitière de manière appropriée. Cependant, le SVG est toujours rendu en dehors de la DIV. Comment puis-je obtenir l'élément SVG rendu à l'intérieur de la Div? Je ne peux pas utiliser le échantillon HTML et le CSS Le triangle rempli doit Soyez à l'intérieur du rectangle rouge mais est rendu extérieur voir sur Jsfiddle
3 Réponses :
Modifier le sélecteur CSS, écrire uniquement voici un dessin non un élément. démo < / p> svg {...} et ajouter flotteur: gauche
YEP Flottant "SVG" fait l'affaire. Mais "remplir" est un attribut de "chemin" alors je suppose que je vais le laisser dans le sélecteur de chemin
Quelqu'un peut-il expliquer pourquoi les pauses originales? Je remarque que le problème disparaît si je change 6 à 60, cela semble donc être un problème pour les petites divs / svg - un comportement très incohérent.
Essayez ceci:
#container { float: left; width: 100px; height: 25px; border: 1px solid green; }
#container #inner_container { float: left; width: 6px; height: 6px; border: 1px solid red; }
#inner_container svg { display: block; float: left; }
Juste être curieux, pourriez-vous élucider sur des "façons plus élégants"? J'ai eu beaucoup de problèmes pour essayer d'adapter mon SVG à l'intérieur des divs ces derniers temps
Bien, flottant chaque élément n'est pas la meilleure façon de faire quelque chose comme ça, car il n'est pas toujours nécessaire de le faire, mais dans des situations comme celle-ci où je ne connais pas toute l'étendue de ce qui se passe, c'est généralement Une bonne solution rapide pour flotter des éléments qui les empêchent généralement de s'effondrer sur eux-mêmes. J'espère que cela a du sens? De plus, en fonction de votre structure, la flottante pourrait causer des problèmes de mise en page.
Oui, flottant tout serait une catastrophe
Le problème est que vous n'avez pas spécifié Espace de noms pour SVG code> élément. C'est ainsi que cela fonctionne: <div id="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">
<path d="M 0 6 L 3 0 L 6 6 L 0 6"/>
</svg>
</div>
J'ai vécu le même problème que décrit dans la question. J'ai testé votre solution et cela n'a pas résolu le problème. La solution fournie par Sowmya