如何覆盖用户代理样式表（Chrome）以将溢出设置为对我的 svg 可见？答案

【问题标题】：How do i override the user agent stylesheet (Chrome) to set the overflow to visible for my svg?如何覆盖用户代理样式表（Chrome）以将溢出设置为对我的 svg 可见？
【发布时间】：2021-02-26 17:45:56
【问题描述】：

我一直试图将此 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/

【问题讨论】：

欢迎来到 Stack Overflow！寻求代码帮助的问题必须包含在问题本身中最好在Stack Snippet 中重现它所必需的最短代码。见How to create a Minimal, Reproducible Example
为 svg 元素设置 style="overflow:visible" 并删除掩码，即将 <g mask="url(#b)" opacity=".5"> 更改为 <g opacity=".5"> 但是还有很多改进工作要做。例如，您一遍又一遍地使用相同的椭圆。您可以用 use 元素替换省略号。此外，您将 8 个椭圆分组并一遍又一遍地重用该组。您可以使用 use 元素而不是 group 并翻译 use 元素

标签： css svg google-chrome-devtools

【解决方案1】：

您可以包含这种 css 文件：https://necolas.github.io/normalize.css/ 它用于删除所有浏览器默认样式。

但在您的情况下，您可以在 svg 标签中添加一些内联样式，例如 style="overflow:visible"，它将覆盖浏览器默认浏览器样式。更好的解决方案是将其添加到您的 CSS 中

svg {
  overflow: visible;
}

【讨论】：