用反应创建响应式svg

Question

我想创建一个svg，它可以轻松缩放到我给它的任何宽度。在那个svg我有一个圆圈和相对路径的路径，所以我希望它很容易扩展。

但由于某种原因，x，y的位置不正确。

你可以看到下图，圆圈有（x，y）=（0,0） 但它设置在中间。 我认为“viewBox”会导致问题。

jsfiddle链接： https://jsfiddle.net/tzookb/69z2wepo/174297/

代码：

mdTooltip

Answer 1

如果在内部svg上设置了高度，这个问题就会消失。我猜测如果未设置高度，它会自动占用所有可用高度并居中。我希望我有更好的解释，但这完全让我难过。

JS Fiddle

＆＃13;

＆＃13;

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')
);

＆＃13;

＆＃13;

＆＃13;