Question

我已经尝试为淘汰文本构建反应组件，并且遇到了一个我无法向自己解释的样式问题。

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
}

您可以查看以下代码框 https://codesandbox.io/s/71qxyx6m86

我添加了以下样式

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

SVG Knockout文本样式问题：无法解释的裁剪底部

1 个答案: