Est-il possible de définir l'ombre portée d'un élément svg en utilisant css3, quelque chose comme
box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;J'ai vu quelques remarques sur la création d'ombres à l'aide d'effets de filtre. Existe-t-il un exemple d'utilisation de CSS seul? Vous trouverez ci-dessous un code de travail où le style de cusor est correctement appliqué, mais sans effet d'ombre. Veuillez m'aider à obtenir l'effet d'ombre avec le moins de code possible.
svg .shadow {
cursor:crosshair;
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
} <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" viewBox="0 0 120 70">
<rect class="shadow" x="10" y="10" width="100" height="50" fill="#c66" />
</svg>
html
css
svg
svg-filters
bsr
la source
la source
slopeattribut pour ajuster l'opacité souhaitée.Utilisez la
nouvellefilterpropriété CSS .Pris en charge par les navigateurs webkit, Firefox 34+ et Edge .
Vous pouvez utiliser ce polyfill qui prendra en charge FF <34, IE6 +.
Vous l'utiliseriez ainsi:
Cette approche diffère de l'
box-shadoweffet en ce qu'elle tient compte de l'opacité et n'applique pas l'effet d'ombre portée à la boîte mais plutôt aux coins de l'élément svg lui-même.Remarque : cette approche ne fonctionne que lorsque la classe est placée sur l'
<svg>élément seul. Vous ne pouvez PAS l' utiliser sur un élément svg en ligne tel que<rect>.En savoir plus sur les filtres CSS sur html5rocks .
la source
Vous pouvez facilement ajouter un effet d'ombre portée à un élément svg en utilisant la fonction CSS drop-shadow () et les valeurs de couleur rgba. En utilisant les valeurs de couleur rgba, vous pouvez modifier l'opacité de votre ombre.
la source
Le moyen le plus simple que j'ai trouvé est avec
feDropShadow. Je ne reviendrai plus jamais sur l'utilisation de ces noms de balises de filtre incroyablement ésotériques que je ne comprends pas.la source
filter:url(#shadow)à l'élément que vous souhaitez avoir une ombre (#shadowc'est l'id de lafilterbalise). Par exemple<path d="..." style="filter:url(#shadow)"/>. Vous devriez peut-être ajouter cela à votre réponse.Je ne connais pas de solution CSS uniquement.
Comme vous l'avez mentionné, les filtres sont l'approche canonique pour créer des effets d'ombre portée dans SVG. La spécification SVG en inclut un exemple.
la source
-webkit-filter: drop-shadow()est la voie à suivre à coup sûr. Voir la réponse de @hitautodestruct.Removed: Filter Effects This chapter is no longer part of the SVG specification!!Texte noir avec ombre blanche
Une autre façon, j'ai utilisé pour l'ombre blanche (sur le texte): créer un clone pour l'ombre:
Remarque : Cela nécessite une
xmlns:xlink="http://www.w3.org/1999/xlink"déclaration SVG.La valeur réelle du texte est située dans la
<defs>section, avec position et style, mais sansfilldéfinition.Le texte est cloné deux fois: d'abord pour l'ombre et deuxièmement pour le texte lui-même.
Ombre plus éloignée avec la plus grande valeur d' écart de flou :
Vous pouvez utiliser cette même approche avec des objets SVG standard.
Avec la même exigence: pas de définition de remplissage dans la
<defs>section !la source
flood-color?Blurest utilisé pour rendre l’ombre un peu floue. Voir ma deuxième version textuelleMore distant shadow...(Ajoutée maintenant)Probablement une évolution, il semble que les filtres CSS en ligne fonctionnent bien sur les éléments, d'une certaine manière.
La déclaration d'un filtre CSS à ombre portée, dans un élément svg, à la fois dans une classe ou en ligne ne fonctionne PAS , comme spécifié précédemment.
Mais, au moins dans Firefox, avec la magie suivante:
Ajout de la déclaration de filtre en ligne , avec javascript, après le chargement du DOM .
la source