React & SVG: How do I make <path> support onClick?

Question

This is what React SVG currently supports: http://facebook.github.io/react/docs/tags-and-attributes.html#svg-attributes

I'm trying to figure out how to make a shape I drew using the SVG path clickable. If there is another way to draw a shape that can be made clickable, that works too.

Thanks!

Answer 1

I wrap my SVG with a div and apply any attributes that I desire (click handlers, fill colors, classes, width, etc..), like so (fiddle link):

import React, { PropTypes } from 'react'

function XMark({ width, height, fill, onClick }) {
    return (
        <div className="xmark-container" onClick={onClick}>
            <svg className='xmark' viewBox="67 8 8 8" width={width} height={height} version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
                <polygon stroke="none" fill={fill} fillRule="evenodd" points="74.0856176 9.4287633 71.5143809 12 74.0856176 14.5712367 73.5712367 15.0856176 71 12.5143809 68.4287633 15.0856176 67.9143824 14.5712367 70.4856191 12 67.9143824 9.4287633 68.4287633 8.91438245 71 11.4856191 73.5712367 8.91438245 74.0856176 9.4287633 74.0856176 9.4287633 74.0856176 9.4287633" />
            </svg>
        </div>
    )
}
XMark.propTypes = {
    width: PropTypes.number,
    height: PropTypes.number,
    fill: PropTypes.string,
    onClick: PropTypes.func,
}
XMark.defaultProps = {
    width: 8,
    height: 8,
    fill: '#979797',
    onClick: null,
}
export default XMark

You can of course ditch the wrapper and apply the onClick to the svg element as well, but I've found this approach works well for me! (I also try and use pure functions when possible https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc)