SVG 透明背景网页

Question

我正在尝试将这个SVG代码的背景改为透明，但没有成功。我对SVG很陌生，不知道在谷歌上找不到解决方案；有人能帮忙吗？

demo: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>

- Gildas.Tambo

Answer 1

transparent并不是SVG规范的一部分，虽然像Firefox这样的许多UA仍然支持它。SVG的正确做法是将stroke设置为none，或者将stroke-opacity设置为0。

您还没有为<rect>元素设置填充值，默认值为黑色。如果要创建一个透明的矩形，您需要添加fill="none"。

- Robert Longson

---

这个答案已经过时了。当前版本的SVG规范已经从CSS3规范中采用transparent关键字。 - mindplay.dk

仍然没有充分的理由在SVG中使用透明。我回答中提供的所有替代方案都会导致更快的渲染速度。 - Robert Longson

为什么none不是规范中的有效关键字，但在渲染时比transparent更快？您是否实际进行了基准测试，或者是什么让您认为transparent的填充/描边会与none有所不同？ - mindplay.dk

「@mindplay.dk none is a valid keyword。我没有对其进行基准测试，但是我已经实现了它。你看过我的个人资料页吗？」 - Robert Longson

好奇心 - 我们还可以使用透明的HEX代码，例如 #ffffff00 或 #ffffff30。如果采用上述HEX代码，您的答案是否仍然能够提供更快的渲染速度？ - Gangula

@Gangula：是的。 - Yann Dìnendal

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" />

- 0xFK

---

只有使用透明度才能起作用。如果要完全透明的背景，您必须使用@Robert Longson的解决方案。 - Joel Carneiro

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>

- Daniel Danielecki

---

我正在检查我的文件中的fill =“”条目，有很多条目。我应该改变什么来使图像透明？ - Mark

@Mark 如果没有一些代码片段/沙盒，最好不要猜测。 - Daniel Danielecki

我也遇到了同样的问题，但在我的情况下，问题是当鼠标悬停在按钮上（其中包含SVG）时，SVG的颜色不会改变。所以我只需将样式（在SVG元素内部）中的所有文本“fill: rgb(255,255,255);”替换为“fill: currentColor;”，然后它就起作用了，最后在鼠标悬停时成功改变了颜色。谢谢。我来这里寻找如何使我的SVG透明的解决方案，但在阅读了整个对话后，我得到了提示。 - ncs ncs