search

susielu / react-annotation

Use react-annotation with built-in annotation types, or extend it to make custom annotations. It is made for annotations in SVG.
http://react-annotation.susielu.com/
Apache License 2.0
396 stars 34 forks source link

Annotation Background #17

Closed samtmartin closed 6 years ago

samtmartin commented 6 years ago

Hi Susie -- thank you for putting this great library together! Is it possible to add a background color to an annotation to set the titleColor and labelColor against? I have looked through the docs and a few of the examples provided. Any help would be greatly appreciated!

susielu commented 6 years ago

There's a rect behind the annotation you can access with the .annotation-not-bg class and set a different fill color to using css. Let me know if I'm misunderstanding the question though.

samtmartin commented 6 years ago

Thank you for getting back to me! I see the .annotation-not-bg class I just can't figure out how to override the default fill and opacity styles.

susielu commented 6 years ago

You can just override it with css. Css styles have higher priority than svg attribute properties.

On Sat, Sep 22, 2018, 8:17 AM Sam Martin notifications@github.com wrote:

Thank you for getting back to me! I see the .annotation-not-bg class I just can't figure out how to override the default fill and opacity styles.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/susielu/react-annotation/issues/17#issuecomment-423751147, or mute the thread https://github.com/notifications/unsubscribe-auth/ABYfbVS6ZuvbQ_wOztvJPXDwMDFDO2r9ks5udlSggaJpZM4WxUJ8 .

samtmartin commented 6 years ago

I have tried to override with css, but when I input styles to the .annotation-not-bg class in my style sheet they don't override the rect's properties. Do you have any idea why this might be happening? Thank you again for your help.

susielu commented 6 years ago

Are you able to put together an example? It seems to be working on the docs and in this codepen. https://codepen.io/susielu/pen/KxLJRM

samtmartin commented 6 years ago

Ugh. I'm embarrassed to admit this, but I had a syntax error that was preventing styles from being rendered properly. Thank you so much Susie for your help and patience!

susielu commented 6 years ago

👍 glad you solved the puzzle. Will close this issue.