Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Enable display svg prop #1220

Closed
morellan opened this issue Dec 11, 2019 · 2 comments
Closed

Enable display svg prop #1220

morellan opened this issue Dec 11, 2019 · 2 comments

Comments

@morellan
Copy link

morellan commented Dec 11, 2019 •
edited
Loading

Feature Request

The SVG spec specifies a display prop that is not currently used in react-native-svg

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/display

Why it is needed

I'm using SvgCssUri and sometimes the remote SVG comes with a display="none" prop that is not handled and is displaying the hidden elements.

Here is an example of the SVG: https://res.cloudinary.com/nivelat-staging/image/upload/v1517432918/vehiculo-parte-freno_iiy2fv.svg

The problematic part of that SVG is this:

<g id="Capa_1" display="none">
	<g display="inline">
		<circle fill="none" stroke="#1D1D1B" stroke-width="0.5" stroke-miterlimit="10" cx="50" cy="50" r="50.03"/>
		<rect x="6.474" y="6.474" fill="none" stroke="#1D1D1B" stroke-width="0.5" stroke-miterlimit="10" width="87.053" height="87.053"/>
		<circle fill="none" stroke="#1D1D1B" stroke-width="0.5" stroke-miterlimit="10" cx="50" cy="50" r="43.526"/>
	</g>
</g>

Here is how it's displayed on Web

And here is how it's displayed on Mobile

Possible implementation

I fixed it by adding the display prop to the extractProps method and returning null when a group has that prop, but I guess it should be implemented on every shape.

morellan@80c09fc

Code sample
msand added a commit that referenced this issue Jan 1, 2020
@msand
feat: Implement display="none"
3e3ad13 
fixes: Enable display svg prop #1220
@msand
Copy link
Collaborator

msand commented Jan 1, 2020

Can you try with the latest commit from the develop branch?

msand pushed a commit that referenced this issue Jan 4, 2020
@semantic-release-bot
chore(release): 9.14.0 [skip ci]
1749176 
# [9.14.0](v9.13.6...v9.14.0) (2020-01-04)

### Bug Fixes

* **android:** correct values for measureInWindow, fixes [#1231](#1231) ([3bf07f8](3bf07f8))
* **android:** elements not touchable if below opacity limit ([ebc7220](ebc7220)), closes [#1200](#1200)
* **android:** fix radial gradient vertical center offset scaling ([d5bddd5](d5bddd5))
* **ios:** crash when offset is outside range [#1201](#1201) ([a2ef51f](a2ef51f))
* **web:** fix gesture responder dimensions measurement ([36c20b3](36c20b3))
* extraction of clip rule, fixes [#1233](#1233) ([f93bdde](f93bdde))
* Text color doesn't work with inlineSize [#1225](#1225) ([027b8c1](027b8c1))

### Features

* **android:** support using other native views in e.g. masks ([15b4ac6](15b4ac6))
* **ios:** support using other native views in e.g. masks ([518a3b1](518a3b1))
* **web:** Implement support for event, touch & responder handlers ([60561ec](60561ec))
* **web:** Optimize: only set responders if press handler exists ([23250ad](23250ad))
* Implement display="none" ([3e3ad13](3e3ad13)), closes [#1220](#1220)
@msand
Copy link
Collaborator

msand commented Jan 4, 2020

Released in v10

@msand msand closed this as completed Jan 4, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@msand @morellan