Question

我有一个像这样定义的SVG符号：

<symbol id="MySymbol" >
  <line id="L_010" x1="7" y1="20" x2="23" y2="20" style="stroke:navy; stroke-width:2" />
  <line id="L_020" x1="7" y1="40" x2="23" y2="40" style="stroke:navy; stroke-width:2" />
  <line id="L_030" x1="7" y1="60" x2="23" y2="60" style="stroke:navy; stroke-width:2" />
  <rect id="R_00" x="10" y="0" width="10" height="200" style="fill:#A0B0C0; stroke:navy; stroke-width:1" />
  <line id="L_000" x1="0" y1="1" x2="30" y2="1" style="stroke:navy; stroke-width:2" />
</symbol>

然后我需要在SVG绘图中多次重复此符号 - 使用＆lt;使用＆gt;，像这样：

<use x="400" y="10" width="30" height="200" xlink:href="#MySymbol" />

但是 - 我需要制作第一个符号才能只显示符号的底部。让我们说 - 只有最后30％。可以在SVG中做到吗？你能告诉我吗？

实际上我需要显示第一个符号 - 仅显示底部（约30％），最后一个符号 - 仅显示顶部（约30％）。我知道如何只显示最后一个符号的30％ - 只需指定较小的＆＃39;高度＆＃39;值的＆lt;使用＆gt;。但问题仍然是 - 如何仅显示符号底部的30％？

感谢。

Answer 1

剪掉你不想表示的位数，例如显示下半部分你可以做到这一点......

<defs>
    <clipPath id="clip1" clipPathUnits="objectBoundingBox">
        <rect y="0.5" width="1" height="0.5" fill="black" />
    </clipPath>

    <symbol id="MySymbol" >
      <line id="L_010" x1="7" y1="20" x2="23" y2="20" style="stroke:navy; stroke-width:2" />
      <line id="L_020" x1="7" y1="40" x2="23" y2="40" style="stroke:navy; stroke-width:2" />
      <line id="L_030" x1="7" y1="60" x2="23" y2="60" style="stroke:navy; stroke-width:2" />
      <rect id="R_00" x="10" y="0" width="10" height="200" style="fill:#A0B0C0; stroke:navy; stroke-width:1" />
      <line id="L_000" x1="0" y1="1" x2="30" y2="1" style="stroke:navy; stroke-width:2" />
</symbol>

</defs>

<use x="400" y="10" width="30" height="200" xlink:href="#MySymbol" clip-path="url(#clip1)" />

如何在SVG中显示符号的底部？

1 个答案: