SVG敲除文本样式问题：不明原因的裁剪底部

我试图为基因敲除文本构建一个反应组件，并遇到我无法向自己解释的样式问题。SVG敲除文本样式问题：不明原因的裁剪底部

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

正如你可以看到底部被裁剪，而不是具有侧完全圆，画半圈，出于某种原因，。任何人都可以看到为什么以及如何解决这个问题？谢谢。

来源

2017-09-14 Nicolas Marshall

加上'的line-height：0'到包含你的'svg'的0123E＃ – sol

@RobertLongson当然！现在完成了。 –

添加这个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")

来源

2017-09-14 09:22:48 lpradhap

非常棒！谢谢！ –

SVG敲除文本样式问题：不明原因的裁剪底部

回答

相关问题