Question

这是一个SVG，其中两个文本一个在另一个之下。我需要将第一个文本始终保持在下一个文本的固定位置。如果这个间隙可以响应，那就更好了，也就是说，如果svg的大小减小它会减少，并且相应地增加。我经常搜索，发现很多答案都在我头上。我们不能做一些看似y=".text--line2.y"的事情吗？

这是svg：

.text--line {
  font-size: .5em;
}

svg {
  background: black;
  position: absolute;
  width: 100%;
  height: 100%;
  font: 5em/1 Arial;
}

.text-copy {
  fill: none;
  stroke: white;
  stroke-dasharray: 7% 28%;
  stroke-width: 3px;
   
}
.text-copy:nth-child(1) {
  stroke: #cccccc;
  stroke-dashoffset: 7%;
}
.text-copy:nth-child(2) {
  stroke: #ffffff;
  stroke-dashoffset: 14%;
}
.text-copy:nth-child(3) {
  stroke: #eeeeee;
  stroke-dashoffset: 21%;
}
.text-copy:nth-child(4) {
  stroke: #aaaaaa;
  stroke-dashoffset: 28%;
}
.text-copy:nth-child(5) {
  stroke: #bbbbbb;
  stroke-dashoffset: 35%;
}

@-webkit-keyframes stroke-offset {
  50% {
    stroke-dashoffset: 35%;
    stroke-dasharray: 0 87.5%;
  }
}

@keyframes stroke-offset {
  50% {
    stroke-dashoffset: 35%;
    stroke-dasharray: 0 87.5%;
  }
}

<svg viewBox="0 0 800px 600px">
  <symbol id="s-text">
    <text text-anchor="middle" x="42%" class="text--line" y="40%">
      sdsds
    </text>
    <text text-anchor="middle" x="50%" y="68%" class="text--line2">
     gfgfg
    </text>
    
  </symbol>
  
  <g class="g-ants">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-text" class="text-copy"></use>     
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-text" class="text-copy"></use>     
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-text" class="text-copy"></use>     
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-text" class="text-copy"></use>     
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-text" class="text-copy"></use>     
  </g>
</svg>

Answer 1

您可以使用dx and dy属性定位字符串的部分内容。该属性描述了下一个tspan 相对于前一个的位置。想象一下：最初，＆＃34; abcde＆＃34;和＆＃34; fghij＆＃34;将在一行中呈现，彼此相邻。设置一个dx / dy然后移动＆＃34; fghij＆＃34;按此数额。

请记住，空格也会导致水平前进。如果使用百分比值，则它们与视口的大小（<svg> 元素，而不是其viewBox）相关。

＆＃13;

.text--line {
  font-size: .5em;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
  font: 5em/1 Arial;
}

＆＃13;

<svg viewBox="0 0 800px 600px">
    <text text-anchor="middle">
      <tspan x="42%" y="40%" class="text--line">abcde</tspan><tspan
             dx="-7%" dy="30%" class="text--line2">fghij</tspan>
    </text>
</svg>

＆＃13;

如何制作svg文本的位置取决于另一个文本的位置？

1 个答案: