Closed mnquintana closed 8 years ago
Are they also stripped when using them in the 'style'-attribute?
It's worth noting that virtual-dom
's "attributes" are actually assigned as JavaScript properties on the underlying DOM nodes rather than HTML attributes. This is why you have to use the className
property instead of class
. For HTML elements, all the attributes correspond to properties. I don't think this is the case for SVG, however.
@BinaryMuse and @kuychaco ran into this issue using SVG in etch and came up with a workaround. Interested in their thoughts here.
Yeah virtual-dom
's SVG support seems to be a bit weird. #17 added support for tags but did nothing to normalize attributes except for className
. Perhaps they should be normalized to use the camelCase format other attributes use? We'd have to have a list of them and do them manually (à la React) to handle them.
Here's an example of an SVG component that we got working; notice the use of stroke-width
and stroke-linecap
instead of strokeWidth
and strokeLinecap
'use babel'
/** @jsx etch.dom */
import etch from 'etch'
import stateless from 'etch-stateless'
export default stateless(etch, () => {
// Inline SVG so the icon can be styled with CSS
return (
<svg className='icon-svg icon-atom' viewBox='0 0 64 64'>
<g stroke='none' stroke-width={1} fill='none' fillRule='evenodd'>
<g transform='translate(1.640625 4.170573)'>
<path stroke='currentColor' stroke-width={3} stroke-linecap='round' d='M41.1546628,24.0016159 C48.1314158,38.3143746 49.5709562,51.8023702 44.283365,54.4984514 C38.8313273,57.2797075 28.2924076,47.5351914 20.7438863,32.7341528 C13.195365,17.9331141 11.4960833,3.6802309 16.9481211,0.899818142 C19.3220556,-0.311183594 22.6607435,0.853435764 26.2962786,3.77468229' />
<path stroke='currentColor' stroke-width={3} stroke-linecap='round' d='M6.63099349,33.1397878 C2.5552474,31.0222214 0.181312934,28.4720339 0.317930122,25.8366714 C0.635860243,19.7243173 14.3448047,15.4697882 30.9370464,16.3325004 C47.5292882,17.196056 60.7221233,22.8504896 60.4041931,28.9628438 C60.2667326,31.5982062 57.6406467,33.887809 53.3675647,35.5710677' />
<path stroke='currentColor' stroke-width={3} stroke-linecap='round' d='M24.4991723,49.9251489 C20.043934,53.141556 16.0786623,54.3162951 13.5984701,52.7064049 C8.46436241,49.3753069 11.6335438,35.3762617 20.6772643,21.4379353 C29.7209848,7.50045226 41.2145382,-1.0979974 46.3486458,2.23394401 C48.73523,3.78227214 49.3272378,7.63538281 48.3692309,12.7155182' />
<path fill='currentColor' d='M34.226822,26.9194891 C34.6577565,28.9139314 33.3902526,30.879701 31.3958103,31.3106354 C29.4013681,31.7415699 27.4355985,30.474066 27.0046641,28.4796237 C26.5745729,26.4851814 27.8412335,24.5194119 29.8356758,24.0884774 C31.8292747,23.657543 33.7950443,24.9250469 34.226822,26.9194891' />
</g>
</g>
</svg>
)
})
@BinaryMuse So am I understanding correctly that for SVG elements they interpret the attributes as actual attributes rather than DOM node properties?
@nathansobo Yeah that's correct; anything using the svg
function (which Etch delegates to automatically based on tag name) uses attributes. See https://github.com/Raynos/virtual-hyperscript/blob/5aac9c75d3e3286755d14901ad717933a07e9f0a/svg.js#L23
I've implemented a PR to normalize attribute names if people wanna take a gander.
Steps to reproduce:
Try sticking this JSX in a component's
render
method:fillRule
andstrokeWidth
attributes (and others too, probably) are stripped from the rendered DOM element.