1

我正在尝试为 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>

4

1 回答 1

3

要达到您想要的效果，请在defs部分中定义形状，然后从use元素中引用它。

因此，相当于您的示例文档是：

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

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

于 2013-05-20T19:52:30.403 回答