主页 / 问题 / 1306528
Accepted
Leonid
Asked:2022-07-19 05:34:46 +0000 UTC2022-07-19 05:34:46 +0000 UTC

SVG 中的填充属性。默认值是多少？为什么要指定 fill="none"？

  • 772

在教程中，您可以看到值为“none”的“fill”属性的使用。尤其是混淆了这样的线条指示！！！

<line fill="none" stroke="black" x1="50" y1="50" x2="200" y2="50"/>

为什么要为一行指定填充？是的，对于其他形状，如果我想让它们保持透明。有默认值吗？填充是否从祖先继承，冲突如何解决？

svg

2 个回答

  1. Best Answer

    在教程中，您可以看到值为“none”的“fill”属性的使用。尤其是混淆了这样的线条指示！！！

    如果线是直的，那么使用fill="none"orfill="индекс цвета"绝对没有任何作用。此外，如果您不指定 color stroke，那么您将看不到任何东西：

    • 填充=“紫色”

    <svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="300" height="300" viewBox="0 0 300 300" >  
<line x1="10" y1="50" x2="300" y2="300" fill="purple" />
</svg>

    • Purple fill="purple"表示直线被忽略，stroke="green" stroke-width="4"将显示一条绿线

    <svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="300" height="300" viewBox="0 0 300 300" >  
<line x1="10" y1="50" x2="300" y2="300" fill="purple" stroke="green" stroke-width="4" />
</svg>

    曲线轮廓

    轮廓是否闭合完全没有关系，如果不指定，形状的内部空间将被涂成黑色。fill="none" 也就是说，填充值默认为黑色。

    <svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="300" height="300" viewBox="0 0 300 300" >  
<path d="M10,250 A100,100 0 0 1 210,250" />
</svg>

    • 添加描边

    <svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="300" height="300" viewBox="0 0 300 300" >  
<path stroke="red" stroke-width="4"  d="M10,250 A100,100 0 0 1 210,250" />
</svg>

    • 添加fill="none"，即去掉填充

      <svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
             width="300" height="300" viewBox="0 0 300 300"  >  
    <path fill="none" stroke="red" stroke-width="4"  d="M10,250 A100,100 0 0 1 210,250" />
    </svg>

    上述所有示例也适用于 SVG 文本。

    • 中风=“红色”中风宽度=“4”

    <svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="300" height="300" viewBox="0 0 300 300" >  
<text x="50" y="200" font-size="200px"  stroke="red" stroke-width="4" stroke="red">T </text>
</svg>

    • 中风=“红色”中风宽度=“4” 填充中风=“无”

    <svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="300" height="300" viewBox="0 0 300 300" >  
<text x="50" y="200" font-size="200px" fill="none" stroke="red" stroke-width="4" stroke="red">T </text>
</svg>

    结论

    1. fill="none" 用于删除曲线形状内部空间的默认黑色阴影
    2. 对于直线，参数fill不起任何作用。
      指示 fill="none" 不会导致错误，这可能是在直线教程示例中找到它的原因。
    • 6

  2. 根据所使用的上下文，填充属性有两种含义。

    默认情况下，当动画元素结束并且它们的效果不再应用于目标属性的视图值时。该属性fill可用于在动画元素的活动持续时间结束后保留​​动画值。

    对于形状和文本，该属性fill是一个表示属性，它指定给定图形元素内部的颜色。所谓的“内部”取决于形状本身和fill-rule属性的值。作为视图属性，也可以直接在 CSS 样式表中用作属性

    至于是否指定：我不认为这是一个错误，虽然逻辑上它只在图形的路径以开头（closePath -Z）结束时才有效。

    • 3

相关问题