Not catching the style/classes correctly (Black shape)
See original GitHub issueHi, I have an SVG file with <style>
tags, and the conversion is not going well. That renders as a black shape of the SVG. I think that it doesn’t catch the <styles>
tag well… what I can do? I have so much SVG Files…
SVG File:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 96 96" style="enable-background:new 0 0 96 96;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#222FFF;}
</style>
<path class="st0" d="M48,96c26.5,0,48-21.5,48-48S74.5,0,48,0S0,21.5,0,48S21.5,96,48,96"/>
<path class="st0" d="M48,95c26,0,47-21,47-47S74,1,48,1S1,22,1,48S22,95,48,95"/>
<g>
<g id="Navigation">
<g>
<path class="st1" d="M24,30.9h48.6c1.8,0,3.2-1.5,3.2-3.3c0-1.8-1.4-3.3-3.2-3.3H24c-1.8,0-3.2,1.5-3.2,3.3
C20.8,29.4,22.2,30.9,24,30.9z M72.6,44.3H24c-1.8,0-3.2,1.5-3.2,3.3c0,1.8,1.4,3.3,3.2,3.3h48.6c1.8,0,3.2-1.5,3.2-3.3
C75.8,45.7,74.3,44.3,72.6,44.3z M72.6,64.2H24c-1.8,0-3.2,1.5-3.2,3.3c0,1.8,1.4,3.3,3.2,3.3h48.6c1.8,0,3.2-1.5,3.2-3.3
C75.8,65.6,74.3,64.2,72.6,64.2z"/>
</g>
</g>
</g>
</svg>
Thanks.
Issue Analytics
- State:
- Created 5 years ago
- Comments:13 (6 by maintainers)
Top Results From Across the Web
Styleclass af:button - Oracle Communities
Hi. I am having trouble with style classes. I have two af:buttons and want to style them so that they look different when...
Read more >How do I override the style of primeng components?
1. Make sure styles.scss at the most bottom line in angular.json, then override the styleClass provided by primeng. · This tip about having ......
Read more >list-style - CSS-Tricks
The list-style property is a shorthand property that sets values for three different list-related properties in one declaration:
Read more >Xamarin.Forms 5: Dual Screens, Dark Modes, Designing with ...
Learn about new enhancements to Xamarin.Forms 5 to support new screen sizes, orientatonss and postures supported in the Surface Duo.
Read more >Bootstrap Buttons - examples & tutorial
Responsive Buttons built with Bootstrap 5. Multiple predefined button style classes: button link, outline, round button, social, floating, fixed & more.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@alamothe New version is out that adds support for the SVGR config file: https://github.com/kristerkari/react-native-svg-transformer/releases/tag/0.13.0
Thanks @manelsanz!
There are still features that
react-native-svg
does not support when compared what the web browsers support related to SVG rendering.I haven’t tested, but my guess is the same as yours that the
<style>
tag is not supported. Could you instead change the svg file to have thefill
attribute in thepath
elements instead of the<style>
tag?