CODEWITHSUNDEEP
javascriptreactjsd3.jssvg
Tzook Bar Noy
Tzook Bar Noy

Reputation: 11677

create a responsive svg with react

I want to create an svg that will be easily scaled on whatever width I'll give it. In that svg I have a circle and path with relative paths so I want it to be easily scaleable.

But for some reason the position of x,y are not right.

You can see the image below, the circle has (x,y)=(0,0) but it is set in the middle. I assume "viewBox" is causing problems.

enter image description here

jsfiddle link: https://jsfiddle.net/tzookb/69z2wepo/174297/

code:

const ExclamationIcon = props => (
    <svg {...props} viewBox="0 0 140 140">
      <circle fill="#f66868" cx="70" cy="70" r="70" />
      <g transform="translate(58,30)">
        <path fill="white" d="M 11,56.7 L 9,56.7 L 4.2,13.2 C 4,11.4 4,10 4,9 C 4,7 4.5,4.9 5.6,3.5 C 7,2.2 8.3,1.5 10,1.5 C 11.7,1.5 13,2.2 14.4,3.5 C 15.5,4.9 16,7 16,9 C 16,10 16,11.4 15.8,13.2 z M 10,64 A 6,6 0 1,1 10,76 A 6,6 0 1,1 10,64 z"/>
      </g>
    </svg>
);


class Hello extends React.Component {
  render() {
    return (
        <div>
        asdas
        <svg className="main">
          <rect x="20" y="20" width="100" height="40" fill="red" />

          <ExclamationIcon width="30" x="0" y="0" />
        </svg>


      </div>
    );
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

Upvotes: 3

Views: 6099

Answers (1)

Chirag Ravindra
Chirag Ravindra

Reputation: 4830

Looks like this issue goes away if the height is set on the inner svg. I'm guessing that if the height is not set it automatically takes up all the available height and centres itself. I wish I had a better explanation but this completely stumped me.

JS Fiddle

const ExclamationIcon = props => (
    <svg {...props} viewBox="0 0 140 140">
      <circle fill="#f66868" cx="70" cy="70" r="70" />
      <g transform="translate(58,30)">
        <path fill="white" d="M 11,56.7 L 9,56.7 L 4.2,13.2 C 4,11.4 4,10 4,9 C 4,7 4.5,4.9 5.6,3.5 C 7,2.2 8.3,1.5 10,1.5 C 11.7,1.5 13,2.2 14.4,3.5 C 15.5,4.9 16,7 16,9 C 16,10 16,11.4 15.8,13.2 z M 10,64 A 6,6 0 1,1 10,76 A 6,6 0 1,1 10,64 z"/>
      </g>
    </svg>
);


class Hello extends React.Component {
  render() {
    return (
    	<div>
        asdas
        <svg className="main">
          <rect x="20" y="20" width="100" height="40" fill="red" />

          <ExclamationIcon width="30" height="30" x="0" y="0" />
        </svg>

      
      </div>
    );
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

Upvotes: 2

Related Questions