11
votes

Est-il possible de styler le fichier SVG externe avec CSS?

est-il possible de styler un fichier SVG externe avec CSS sans modifier le contenu du fichier SVG?

et y a-t-il un meilleur moyen d'afficher un fichier SVG externe dans HTML5?


                        
                        
                            
                                                                    html
                                                                    css
                                                                    svg
                                                            
                        
                                                    
                            
                            
                                0 commentaires



                                    
                    3 Réponses :
                    
                                            
                            
                                
                                    11
 votes
                                
                            
                            
                                
                                     Ce n'est pas possible à l'aide d'une étiquette IMG, ce sont essentiellement similaires à des bitmaps, en ce qui concerne l'accès ou la modifier sont concernés. Vous pouvez utiliser la balise   </ code> avec son attribut de style &agrave; la place ou si vous incluez simplement le svg en ligne dans le fichier que vous pouvez faire avec HTML5. </ P>                                </div>

                                                                    <hr>
                                    <!-- comments -->
                                    <div class="pl-5">
                                        <small class="text-muted">2 commentaires</small>
                                        <div class="comments mt-3">
                                                                                            <p class="answer-comment">
                                                    Dang :( Quelqu'un a-t-il un lien vers pourquoi c'est le cas?                                                </p>
                                                <hr>
                                                                                            <p class="answer-comment">
                                                    @Bradleyflood <a href="https://longsonr.wordpress.com/2013/10/23/restrictions-on-svg-used-as-an-Image/" rel="nofollage noreferrer"> longsonr.wordpress.com / 2013/10/23 / ... </a>                                                </p>
                                                <hr>
                                                                                    </div>
                                    </div>
                                                            </div>
                        </div>
                        <hr>
                                            <div class="row mt-3">
                            <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0">
                                <div class="badge badge-score">
                                    4<br> votes
                                </div>
                            </div>
                            <div class="col-lg-11 col-md-10 col-10 col-sm-10">
                                <div class="body-content">
                                    <p> presque. Si vous pouvez int&eacute;grer votre SVG directement dans votre document HTML5 &agrave; l'aide de la balise  code&gt; SVG  code&gt;, vous pouvez le styler avec CSS, comme: <pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset="utf-8" /&gt;
        &lt;style type="text/css"&gt;
            #redcircle { stroke:black; stroke-width:5; }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"&gt;
            &lt;circle id="redcircle" cx="50" cy="50" r="30" fill="red" /&gt; 
        &lt;/svg&gt;
    &lt;/body&gt;
&lt;/html&gt;
</pre></p>
                                </div>

                                                                    <hr>
                                    <!-- comments -->
                                    <div class="pl-5">
                                        <small class="text-muted">2 commentaires</small>
                                        <div class="comments mt-3">
                                                                                            <p class="answer-comment">
                                                    Il a demand&eacute; SVG externe, pas en ligne                                                </p>
                                                <hr>
                                                                                            <p class="answer-comment">
                                                    Vrai. Mais souvent, c'est bien en sachant les alternatives les plus proches.                                                </p>
                                                <hr>
                                                                                    </div>
                                    </div>
                                                            </div>
                        </div>
                        <hr>
                                            <div class="row mt-3">
                            <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0">
                                <div class="badge badge-score">
                                    2<br> votes
                                </div>
                            </div>
                            <div class="col-lg-11 col-md-10 col-10 col-sm-10">
                                <div class="body-content">
                                    <p> Les choses ont un peu chang&eacute; depuis cette question. Vous pouvez utiliser un injecteur SVG pour rendre le SVG en ligne. <p> avec <a href="httptps://github.com/iconfu/svg-inject" rel="nofollow NOREFERRER"> SVGinject </a> Vous pouvez ajouter votre SVG comme ceci:  P&gt; </p><pre> &lt;img src="image/svg/3ds-max.svg" onload="SVGInject(this)" &gt;
</pre></p>
                                </div>

                                                                    <hr>
                                    <!-- comments -->
                                    <div class="pl-5">
                                        <small class="text-muted">3 commentaires</small>
                                        <div class="comments mt-3">
                                                                                            <p class="answer-comment">
                                                    Cette r&eacute;ponse est une tentative trompeuse, car rien n'a chang&eacute; qui permet de coiffer les SVG non inlin&eacute;s. Cette solution utilise JavaScript sur la charge de la page pour tirer dans la SVG externe et inine le SVG dans le DOM. 9 fois sur 10, l'inlinisation du SVG en premier lieu produira des r&eacute;sultats plus performants lorsque vous enregistrez &eacute;galement un tas de demandes de r&eacute;seau et / ou de travail pour le client.                                                </p>
                                                <hr>
                                                                                            <p class="answer-comment">
                                                    @DarianMoody, mais les svg d'inlinage ne fonctionnent pas pour les pages Web dynamiques, ne supporte pas la chargement paresseuse et rend votre code source moins lisible. Nous utilisons avec succ&egrave;s une injection SVG pendant un moment et cela fonctionne simplement.                                                </p>
                                                <hr>
                                                                                            <p class="answer-comment">
                                                    Je n'ai pas dit que cela ne marcherait pas, j'ai dit que cela ne fonctionnerait pas aussi pour la majorit&eacute;. "L'inlin&ccedil;on SVGS ne fonctionne pas pour des pages Web dynamiques", je ne suis pas s&ucirc;r de ce que vous entendez par cela, d&eacute;sol&eacute;. Chargement paresseux - Point &eacute;quitable, mais la majorit&eacute; des moments o&ugrave; vous voudrez en ligne un SVG, la taille des octets sera relativement petite (pensez des ensembles d'ic&ocirc;nes, des logos, etc., vous faites peut-&ecirc;tre quelque chose o&ugrave; il n'est pas logique). Le code source de fa&ccedil;on moins lisible n'est tout simplement pas un probl&egrave;me d'utilisateur. aussi SVG est consid&eacute;rablement plus lisible qu'une image binaire par exemple.                                                </p>
                                                <hr>
                                                                                    </div>
                                    </div>
                                                            </div>
                        </div>
                        <hr>
                                    
            </div>
            <div class="col-lg-3 col-md-12 col-12 col-sm-12" >
                <div class="related">
		    <iframe src="https://rcm-eu.amazon-adsystem.com/e/cm?o=8&p=12&l=ez&f=ifr&linkID=b777da379e25dfc65f34887292b82918&t=birdy0c-21&tracking_id=birdy0c-21" width="300" height="250" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0">
                    
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