Support for SVG Filters?

[rbuchmann]

I'm trying to add an SVG Filter to a component, along these lines:

[:filter {:id "shadow" :x 0 :y 0 :width "200%" :height "200%"}
   [:fe-offset {:result "offOut"
                :in "SourceGraphic"
                :dx 20
                :dy 20}]]

However, the node mappings are not as expected

:fe-offset ; => fe-offset
:feOffset; => feoffset

and the filter doesn't get recognized as a consequence. Is there any way around this, or do I have to resort to component-did-mount etc.?

[danielcompton]

Github issues for Reagent are for bug reports and feature requests. Support requests and usage questions should go to the Clojure Slack channel, the ClojureScript mailing list, or the Reagent mailing list.

[rbuchmann]

I actually do believe this is a bug. The mapping should be

:fe-offset ; => feOffset

exactly as it is for react properties. Is there any reason to forcefully lower-case tag names?

[rbuchmann]

And if there is a good reason, which I find hard to imagine, then this becomes a feature request. I want to be able to use all react elements without jumping through component-did-mount hoops.

[mike-thompson-day8]

React 15 has complete SVG support, but previous versions did not support various bits:
facebook/react#1657 (comment)

As I understand it, the work (hack) around has been to use dangerouslySetInnerHTML
See: https://groups.google.com/d/msg/reagent-project/PMZPUy5yBCc/FfuMy6blCQAJ

But as previously indicated, this is not the place for support.

[ghost]

However, the node mappings are not as expected
:feOffset; => feoffset

Is there any reason to forcefully lower-case tag names?

reagent isn't doing this directly. It's the behavior of svg-in-html, which is case-insensitive. To verify:

console.log(document.createElement("feOffset"));
<feoffset>​</feoffset>​

If you're not getting the visually expected results, it could be a mistake in the markup.

The mapping should be
:fe-offset ; => feOffset

Adding this behavior is problematic for SVG tags which contain dashes in the name.

[rbuchmann]

@mike-thompson-day8 : As I understood it, this hack is unnecessary now. As you can see in #121 , the current reagent should be capable of using all react svg features.

@thwg Thanks for the very helpful explanation. I didn't expect it to be case insensitive. I'll investigate my markup and ask any further questions in the places mentioned above.

Adding this behavior is problematic for SVG tags which contain dashes in the name.

Additionally, it's unnecessary given the information above 😄

[rbuchmann]

@mike-thompson-day8 Apologies, you were right, this is still missing from react < 15. I tracked down the issue to certain properties like :in simply being ignored. Too bad!