SVG透明背景网页

Question

我试图将此 SVG 代码的背景更改为透明，但没有成功。我是 SVG 新手，不知何故我无法在谷歌上找到解决方案；有人可以帮忙吗？

演示：http://jsfiddle.net/kougiland/SzfSJ/1/

<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px" viewBox="0 0 300 100">
  <rect x="0" y="0" width="300" height="100" stroke="transparent" stroke-width="1" />
  <circle cx="0" cy="50" r="15" fill="blue" stroke="transparent" stroke-width="1">
    <animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" />
  </circle>

  <circle id="rotatingBall" cx="0" cy="50" r="15" fill="green" stroke="transparent" stroke-width="1" opacity="0.8"></circle>
  <animateTransform xlink:href="#rotatingBall" attributeName="transform" begin="0s" dur="2s" type="rotate" from="0 20 20" to="360 100 60" repeatCount="indefinite" />
</svg>

Answer 1

透明并不是 SVG 规范的一部分，尽管许多 UA（例如 Firefox）确实支持它。 SVG 方式是将

stroke

设置为

none

，或者将

stroke-opacity

设置为

0

。

您也无需为

<rect>

元素设置任何填充值，默认值为黑色。对于透明矩形，您需要添加

fill="none"

。

Answer 2

在矩形内部，您可以使用 fill-opacity="0.5"

<rect x="0" y="0" width="300" height="100" stroke="transparent" stroke-width="1" fill="green" fill-opacity="0.5" />

Answer 3

假设您有特定颜色的背景，例如

#231f20

，你真的想摆脱这个。例如，您的公司名称/口号是白色的，即

#ffffff

。

您的背景应采用与此类似的格式，只需从

.svg

文件中删除该行：

<path id="path12" style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none" d="M 0,0 H 2048 V 350 H 0 Z" />

保持其他路径不变，这将在这个特定示例中绘制白色。其中之一可能如下所示：

<g transform="translate(87.6235,66.3594)" id="g22">
  <path id="path24" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" d="m 0,0 h 16.497 c 36.293,0 59.458,19.135 67.356,64.009 8.71,49.49 -5.134,62.688 -46.707,62.688 H 22.299 Z m -87.624,-55.432 41.812,237.559 H 58.451 c 76.546,0 117.787,-35.633 104.023,-113.83 C 146.737,-21.117 90.875,-55.432 14.659,-55.432 Z" />
</g>

Answer 4

在nextjs项目上工作时，遇到了类似的问题。我希望我的 svg 是白色且透明的。我使用这个网站来更改 SVG 颜色 - https://deeditor.com/。 （***注意 - 将徽标的颜色更改为深白色，背景为全白色 - #FFFFFF）

然后在IDE中打开svg文件，删除所有带有十六进制代码的填充行 - #FFFFFF