Question

我正在尝试为SVG中的文本实现精确的分层效果。我下面的当前解决方案只是复制和粘贴组元素与文本元素内部纠正每个元素的x和y坐标。我从另一个解决方案中看到def并重用并转换为形状。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMinYMin meet"  width="100%" height="100%" viewBox="0 0 960 640" style="background-color:#def">
<g style="font-family: Arial Black; font-weight: bold;" fill="rgba(244, 164, 96, 0.45)">
    <text text-anchor="middle" x="480" y="610" font-size="160px">&#9829;</text>
    <text x="95" y="265" font-size="160px">PASSION</text>
    <text x="395" y="345" font-size="80px">FOR</text>
    <text x="135" y="485" font-size="160px">PEOPLE</text>
</g>
<g style="font-family: Arial Black; font-weight: bold;" fill="#def">
    <text x="439" y="601" font-size="160px">&#9829;</text>
    <text x="99" y="261" font-size="160px">PASSION</text>
    <text x="399" y="341" font-size="80px">FOR</text>
    <text x="139" y="481" font-size="160px">PEOPLE</text>
</g>
<g style="font-family: Arial Black; font-weight: bold;" fill="orange">
    <text x="440" y="600" font-size="160px">&#9829;</text>
    <text x="100" y="260" font-size="160px">PASSION</text>
    <text x="400" y="340" font-size="80px">FOR</text>
    <text x="140" y="480" font-size="160px">PEOPLE</text>
</g>

Answer 1

要获得所需的效果，请在 defs 部分中定义形状，然后从使用元素中引用它。

因此，您的示例文档的等价物是：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1"
     preserveAspectRatio="xMinYMin meet"
     width="100%" height="100%"
     viewBox="0 0 960 640"
     style="background-color:#def">
<defs>
  <g id="passion" style="font-family: Arial Black; font-weight: bold;">
    <text x="440" y="600" font-size="160px">&#9829;</text>
    <text x="100" y="260" font-size="160px">PASSION</text>
    <text x="400" y="340" font-size="80px">FOR</text>
    <text x="140" y="480" font-size="160px">PEOPLE</text>
  </g>
</defs>

<use xlink:href="#passion" transform="translate(-5,5)" fill="rgba(244, 164, 96, 0.45)" />
<use xlink:href="#passion" transform="translate(-1,1)" fill="#def" />
<use xlink:href="#passion" fill="orange" />
</svg>

不要忘记在root svg元素中定义xlink命名空间。否则你会收到错误。

在SVG中，如何重用位于组中的文本元素，如defs中的形状？

1 个答案: