gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 08:11:54 26 4
gpt4 key购买 nike

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

Here是我的尝试。

enter image description 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>
));

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

最佳答案

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

关于javascript - SVG Knockout 文本样式问题 : unexplained cropped bottom,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46214552/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com