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

transparent不是SVG规范的一部分，尽管许多UAs（如Firefox）确实支持它。 SVG方式是将stroke设置为none，或者将stroke-opacity设置为0。

您也没有在<rect>元素上设置任何填充值，默认为黑色。对于透明矩形，您要添加fill="none"。

Answer 2

假设您有一种具有特定颜色的背景，例如#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 3

内部矩形中，您可以使用 fill-opacity =“ 0.5”

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

SVG透明背景网站

3 个答案: