React: svg clip-path url issue in 15.02

[heswell]

tried upgrading React from 0.14.8 to 15.0.2 but have run into an issue with SVG which seems to be related to a change in the way React emits the clip-path css property.

I have the following in my jsx (simplified):

 <clippath id="clip-above"><path /></clippath>
 <path style={{clipPath:'url(#clip-above)'}} />   

React 0.14.8 emitted the following:

<path style="clip-path: url(#clip-above)" />

React 15.0.2 produces the following

<path style="clip-path: url("#clip-above")" />

Note the quotes around #clip-above, which are new. The clipping does not work in 15

[zpao]

We haven't actually changed the way the way we operate on the DOM here. The difference you're seeing is that we no longer generate HTML for initial render and use the same code path we would use for updates. I assume you're looking in the devtools, which make it a bit harder to really see the true values (parsing style attribute vs setting properties… result is the same but visually setting the property gets parsed before being displayed so has the extra quotes in there).

Can you recreate a case that doesn't work and specify browser? I took the clip-path example from MDN and tried to reproduce but it appears to be working fine in Firefox (49): https://jsfiddle.net/ue1nwwtq/1/. It doesn't seem to be working in Chrome but that also doesn't work if I take the plain HTML example either.

[heswell]

I'm seeing this problem in Chrome. what's interesting is that the component that is rendering this svg is showing ticking real-time timeseries data, so although the initial render uses innerHTML (in react 14) it is subsequently updated many times and renders fine in 14. I will try and create a test sample that works in 14 and not in 15 to demonstrate the effect.

[tahege]

I've just run into the above issue while trying to use clip-path url in Chrome while upgrading from 14 to 15. The above fiddle works fine in Firefox, but I'm now seeing a different bug in my application where clipped SVG elements are gone entirely in Firefox. I'll try to create a test example in the next couple days to replicate it.

[CrokinoleMaster]

Try <clipPath> instead of <clippath>. Chrome seems to be case-sensitive about this, which I think goes against html specs.

[geoffsimons]

The clip-path attribute is not recognized by React. If you use clipPath as the attribute name, it works.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <clipPath id="myClip">
            <polygon points="100,100 200,0 200,200" />
        </clipPath>
      </defs>

      <circle cx="100" cy="100" r="100" clipPath="url(#myClip)"/>
</svg>