如何解决如何覆盖用户代理样式表 (Chrome) 以将溢出设置为对我的 svg 可见？
我一直在尝试将此 SVG 的溢出设置为可见，但用户代理样式表一直覆盖它。令人沮丧。
我已将溢出设置为可见 + 我使用了 css 代码：
background: URL(
<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient x1="50%" y1=".779%" x2="50%" y2="100%" id="c">
<stop stop-color="#0989B4" stop-opacity="0" offset="0%"/>
<stop stop-color="#53FFEE" offset="99.94%"/>
</linearGradient>
<linearGradient x1="50%" y1=".779%" x2="50%" y2="100%" id="d">
<stop stop-color="#0989B4" stop-opacity="0" offset="0%"/>
<stop stop-color="#53FFEE" offset="99.94%"/>
</linearGradient><path id="a" d="M0 0h350v140H0z"/>
</defs>
<g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff">
<use xlink:href="#a"/>
</mask>
<use fill="#41CBD3" xlink:href="#a"/>
<g mask="url(#b)" opacity=".5">
<g transform="translate(-11 -4)">
<ellipse fill="url(#c)" transform="rotate(90 60.479 14.8)" cx="60.479" cy="14.8" rx="14.8" ry="14.834"/>
<ellipse fill="url(#d)" transform="rotate(180 14.834 14.8)" cx="14.834" cy="14.8" rx="14.834" ry="14.8"/>
<ellipse fill="url(#d)" cx="151.767" cy="14.8" rx="14.834" ry="14.8"/>
<ellipse fill="url(#c)" transform="rotate(-90 106.123 14.8)" cx="106.123" cy="14.8" rx="14.8" ry="14.834"/>
<ellipse fill="url(#c)" transform="rotate(90 243.055 14.8)" cx="243.055" cy="14.8" rx="14.8" ry="14.834"/>
<ellipse fill="url(#d)" transform="rotate(180 197.411 14.8)" cx="197.411" cy="14.8" rx="14.834" ry="14.8"/>
<ellipse fill="url(#d)" cx="334.344" cy="14.8" rx="14.834" ry="14.8"/>
<ellipse fill="url(#c)" transform="rotate(-90 288.7 14.8)" cx="288.699" cy="14.8" rx="14.8" ry="14.834"/>
</g>
<g transform="translate(-11 91.63)">
<ellipse fill="url(#c)" transform="rotate(90 60.479 14.8)" cx="60.479" cy="14.8" rx="14.8" ry="14.834"/>
<ellipse fill="url(#d)" transform="rotate(180 14.834 14.8)" cx="14.834" cy="14.8" rx="14.834" ry="14.8"/>
<ellipse fill="url(#d)" cx="151.767" cy="14.8" rx="14.834" ry="14.8"/><ellipse fill="url(#c)" transform="rotate(-90 106.123 14.8)" cx="106.123" cy="14.8" rx="14.8" ry="14.834"/>
<ellipse fill="url(#c)" transform="rotate(90 243.055 14.8)" cx="243.055" cy="14.8" rx="14.8" ry="14.834"/>
<ellipse fill="url(#d)" transform="rotate(180 197.411 14.8)" cx="197.411" cy="14.8" rx="14.834" ry="14.8"/>
<ellipse fill="url(#d)" cx="334.344" cy="14.8" rx="14.834" ry="14.8"/>
<ellipse fill="url(#c)" transform="rotate(-90 288.7 14.8)" cx="288.699" cy="14.8" rx="14.8" ry="14.834"/>
</g>
<g transform="translate(-11 43.815)">
<ellipse fill="url(#c)" transform="rotate(-90 60.479 14.8)" cx="60.479" cy="14.8" rx="14.8" ry="14.834"/>
<ellipse fill="url(#d)" cx="14.834" cy="14.8" rx="14.834" ry="14.8"/>
<ellipse fill="url(#d)" cx="151.767" cy="14.8" rx="14.834" ry="14.8"/>
<ellipse fill="url(#c)" transform="rotate(90 106.123 14.8)" cx="106.123" cy="14.8" rx="14.8" ry="14.834"/>
<ellipse fill="url(#c)" transform="rotate(-90 243.055 14.8)" cx="243.055" cy="14.8" rx="14.8" ry="14.834"/>
<ellipse fill="url(#d)" cx="197.411" cy="14.8" rx="14.834" ry="14.8"/>
<ellipse fill="url(#d)" cx="334.344" cy="14.8" rx="14.834" ry="14.8"/>
<ellipse fill="url(#c)" transform="rotate(90 288.7 14.8)" cx="288.699" cy="14.8" rx="14.8" ry="14.834"/>
</g>
<g transform="translate(11.822 18.77)">
<ellipse fill="url(#c)" transform="rotate(90 60.479 14.8)" cx="60.479" cy="14.8" rx="14.8" ry="14.834"/>
<ellipse fill="url(#d)" transform="rotate(180 14.834 14.8)" cx="14.834" cy="14.8" rx="14.834" ry="14.8"/>
<ellipse fill="url(#d)" cx="151.767" cy="14.8" rx="14.834" ry="14.8"/>
<ellipse fill="url(#c)" transform="rotate(-90 106.123 14.8)" cx="106.123" cy="14.8" rx="14.8" ry="14.834"/>
<ellipse fill="url(#c)" transform="rotate(90 243.055 14.8)" cx="243.055" cy="14.8" rx="14.8" ry="14.834"/>
<ellipse fill="url(#d)" transform="rotate(180 197.411 14.8)" cx="197.411" cy="14.8" rx="14.834" ry="14.8"/>
<ellipse fill="url(#d)" cx="334.344" cy="14.8" rx="14.834" ry="14.8"/>
<ellipse fill="url(#c)" transform="rotate(-90 288.7 14.8)" cx="288.699" cy="14.8" rx="14.8" ry="14.834"/>
</g>
<g transform="translate(11.822 114.4)">
<ellipse fill="url(#c)" transform="rotate(90 60.479 14.8)" cx="60.479" cy="14.8" rx="14.8" ry="14.834"/>
<ellipse fill="url(#d)" transform="rotate(180 14.834 14.8)" cx="14.834" cy="14.8" rx="14.834" ry="14.8"/>
<ellipse fill="url(#d)" cx="151.767" cy="14.8" rx="14.834" ry="14.8"/>
<ellipse fill="url(#c)" transform="rotate(-90 106.123 14.8)" cx="106.123" cy="14.8" rx="14.8" ry="14.834"/>
<ellipse fill="url(#c)" transform="rotate(90 243.055 14.8)" cx="243.055" cy="14.8" rx="14.8" ry="14.834"/>
<ellipse fill="url(#d)" transform="rotate(180 197.411 14.8)" cx="197.411" cy="14.8" rx="14.834" ry="14.8"/>
<ellipse fill="url(#d)" cx="334.344" cy="14.8" rx="14.834" ry="14.8"/>
<ellipse fill="url(#c)" transform="rotate(-90 288.7 14.8)" cx="288.699" cy="14.8" rx="14.8" ry="14.834"/>
</g>
<g transform="translate(11.822 66.585)">
<ellipse fill="url(#c)" transform="rotate(-90 60.479 14.8)" cx="60.479" cy="14.8" rx="14.8" ry="14.834"/>
<ellipse fill="url(#d)" cx="14.834" cy="14.8" rx="14.834" ry="14.8"/>
<ellipse fill="url(#d)" cx="151.767" cy="14.8" rx="14.834" ry="14.8"/>
<ellipse fill="url(#c)" transform="rotate(90 106.123 14.8)" cx="106.123" cy="14.8" rx="14.8" ry="14.834"/>
<ellipse fill="url(#c)" transform="rotate(-90 243.055 14.8)" cx="243.055" cy="14.8" rx="14.8" ry="14.834"/>
<ellipse fill="url(#d)" cx="197.411" cy="14.8" rx="14.834" ry="14.8"/>
<ellipse fill="url(#d)" cx="334.344" cy="14.8" rx="14.834" ry="14.8"/>
<ellipse fill="url(#c)" transform="rotate(90 288.7 14.8)" cx="288.699" cy="14.8" rx="14.8" ry="14.834"/>
</g>
</g>
</g>
</svg>
)
个人支票网站的链接是https://efecollins.github.io/pcard/
解决方法
您可以包含这种 css 文件：https://necolas.github.io/normalize.css/ 它旨在删除所有浏览器默认样式。
但在您的情况下，您可以在 style="overflow:visible" 标签中添加一些内联样式，例如 svg，它会覆盖浏览器默认浏览器样式。更好的解决方案是将其添加到您的 css
svg {
overflow: visible;
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
