编辑滚动条拇指伪元素内的svg背景图像时，svg元素消失[重复]答案

【问题标题】：Svg elements disappear when editing svg background-image inside scrollbar-thumb psuedo element [duplicate]编辑滚动条拇指伪元素内的svg背景图像时，svg元素消失[重复]
【发布时间】：2021-04-11 19:31:02
【问题描述】：

当尝试设置 webkit 滚动条拇指的样式时，polygon 对我有用，但 rect 不行。我尝试在普通 HTML 中重新创建这个精确的 svg，它可以工作，但在用作这个伪元素的背景图像时却没有。它只是显示在屏幕外还是 rect 写错了？

工作代码：

&::-webkit-scrollbar-thumb {
    background: #9C9CFF;
    border: ${borderSize}px solid black;

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='50,00 0,50 100,50'/></svg>");
}

断码：一切都一样，只是添加一个矩形

&::-webkit-scrollbar-thumb {
    background: #9C9CFF;
    border: ${borderSize}px solid black;

    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='50,00 0,50 100,50'/><rect width='180' height='180' fill='#000' /></svg>");
}

添加矩形后多边形也会消失

如果编译过程可能很重要，这是情感样式组件内部的代码，内部使用基本的 create-react-app webpack 设置进行反应。

没有矩形，滚动条拇指看起来像这样，使用矩形，它只有紫色背景，没有形状

【问题讨论】：

标签： javascript html css svg

【解决方案1】：

刚刚弄清楚为什么使用十六进制颜色代码而不是 rgb(x, y, z) 格式会破坏 SVG。不知道为什么十六进制代码不起作用，所以如果有人知道我有兴趣学习

【讨论】：