javascript - SVG Knockout 文本样式问题 : unexplained cropped bottom

Question

我尝试为挖空文本构建一个 React 组件，但遇到了一个我无法向自己解释的样式问题。

Here是我的尝试。

const styles = {
  container: {
    backgroundSize: "cover",
    backgroundImage: "url(http://brokensquare.com/Code/assets/landscape.jpg)",
    padding: "20% 20%"
  },
  knockout: {
    borderRadius: 200,
    overflow: "hidden"
  }
};

const Knockout = ({ text, style }) => {
  const s = style || {};
  return (
    <div style={styles.knockout}>
      <svg viewBox="0 0 200 25">
        <rect
          fill={s.backgroundColor || "rgba(0,0,0,0.6)"}
          x="0"
          y="0"
          width="100%"
          height="100%"
          mask="url(#knockout-text)"
        />
        <mask id="knockout-text">
          <rect fill="#fff" x="0" y="0" width="100%" height="100%" />
          <text y="70%" fill="#000" textAnchor="middle" x="50%">
            {text}
          </text>
        </mask>
      </svg>
    </div>
  );
};

const App = Radium(() => (
  <div>
    <div style={styles.container}>
      <Knockout style={{}} text={"VERY INSPIRATION"} />
    </div>
  </div>
));

如您所见，由于某种原因，底部被裁剪了，而不是将侧面完全倒圆，而是画了半个圆。这里的任何人都可以看到为什么以及如何解决这个问题吗？谢谢。

Answer 1

添加这个css，它会起作用

svg { 
   display: block
}

你可以检查下面的codesandbox https://codesandbox.io/s/71qxyx6m86

我添加的样式如下

render(
  <div>
    <App />
    <Style
      rules={{
        "*": {
          margin: 0,
          padding: 0,
          boxSizing: "border-box"
        },
        svg: {
          display: "block"
        }
      }}
    />
  </div>,
  document.getElementById("root")