search

rexxars / react-hexagon

React component that renders a hexagon using SVG. Supports background images, links, SVG content, click handlers and more.
http://rexxars.github.io/react-hexagon/
MIT License
69 stars 21 forks source link

Gradient instead of image #2

Closed NeXTs closed 8 years ago

NeXTs commented 8 years ago

How to apply gradient instead of image?

Let's say I have gradient

<svg width='0' height='0'>
    <defs>
        <linearGradient id='blueHexagonGradient' x1='0%' y1='0%' x2='0%' y2='100%'>
            <stop offset='0%' stopColor='#6465b7'></stop>
            <stop offset='100%' stopColor='#473cb2'></stop>
        </linearGradient>
    </defs>
</svg>

I want to use by calling url(#blueHexagonGradient)

rexxars commented 8 years ago 
<Hexagon
  style={{
    stroke: 'cyan',
    fill: 'url(#blueHexagonGradient)'
  }}>
  <text x="50%" y="70%">Some text!</text>

  <defs>
    <linearGradient id="blueHexagonGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stopColor="#6465b7"></stop>
      <stop offset="100%" stopColor="#473cb2"></stop>
    </linearGradient>
  </defs>
</Hexagon>
NeXTs commented 8 years ago

thanks!

rexxars commented 8 years ago

Demo updated with example, by the way: http://rexxars.github.io/react-hexagon/

Also, be careful to set unique ids on the gradients :-)