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

Missing stroke-* attributes #3

Closed
JamieBallingall opened this issue Aug 22, 2020 · 2 comments
Closed

Missing stroke-* attributes #3

JamieBallingall opened this issue Aug 22, 2020 · 2 comments

Comments

@JamieBallingall
Copy link

While trying to port the Elm Shapes Example, I noticed that this library is missing stroke-dasharray and that stroke-width applies to line but not to circle, rect or path.

The MDN entry for stroke-width says that:

As a presentation attribute, it can be applied to any element but it only has effect on shapes and text context elements, including: ...

Below is a table showing which attributes apply to which elements.

Element stroke stroke-dasharry stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity
altGlyph ✓ ✓ ✓ ✓ ✓ ✓ ✓
circle ✓ ✓ ✓ ✓
ellipse ✓ ✓ ✓ ✓
line ✓ ✓ ✓ ✓ ✓
path ✓ ✓ ✓ ✓ ✓ ✓ ✓
polygon ✓ ✓ ✓ ✓ ✓ ✓
polyline ✓ ✓ ✓ ✓ ✓ ✓ ✓
rect ✓ ✓ ✓ ✓ ✓ ✓
text ✓ ✓ ✓ ✓ ✓ ✓ ✓
textPath ✓ ✓ ✓ ✓ ✓ ✓ ✓
tref ✓ ✓ ✓ ✓ ✓ ✓ ✓
tspan ✓ ✓ ✓ ✓ ✓ ✓ ✓

It seems like there are two main ways to jump here:
A. We make all the attributes part of PresentationAttributes and hence GlobalAttributes. This produces valid SVG but allows users to set attributes that do nothing.
B. We create more granular types for StrokeAttributes, StokeEndAttributes and StrokeJoinAttributes and apply them selectively to appropriate elements.

My instinct is to do B, which better models the underlying SVG spec. However, it is (technically) a breaking change because it would move stroke out of GlobalAttributes and some users may be setting that for some reason.

Thoughts?
@JamieBallingall
Copy link
Author

Also, fixing this would resolve an open issue in the Statebox repo: Issue with the strokeWidth prop

antarestrader added a commit to antarestrader/purescript-halogen-svg-elems that referenced this issue Jul 10, 2021
@antarestrader
Add strokeWidth to Presentation Attributes
765e1af 
Partially addresses Issue JordanMartinez#3.  Additional stroke-* would need to a function added to Attributes.purs
antarestrader added a commit to antarestrader/purescript-halogen-svg-elems that referenced this issue Jul 10, 2021
@antarestrader
Antarestrader (#1)
7edf4b2 
* Allow Named Color attributes

Allows the use of named colors. See https://www.w3schools.com/colors/colors_names.asp

* Add strokeWidth to Presentation Attributes

Partially addresses Issue JordanMartinez#3.  Additional stroke-* would need to a function added to Attributes.purs
@JamieBallingall JamieBallingall mentioned this issue Jul 21, 2021
Merged
@JordanMartinez JordanMartinez mentioned this issue Jul 21, 2021
Closed
@JamieBallingall
Copy link
Author

This was fixed with ac6cd49 and can be closed.

shamansir pushed a commit to shamansir/purescript-halogen-svg-elems that referenced this issue Aug 26, 2021
@antarestrader @shamansir
Antarestrader (JordanMartinez#1)
4aa9183 
* Allow Named Color attributes

Allows the use of named colors. See https://www.w3schools.com/colors/colors_names.asp

* Add strokeWidth to Presentation Attributes

Partially addresses Issue JordanMartinez#3.  Additional stroke-* would need to a function added to Attributes.purs
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
1 participant
@JamieBallingall