CODEWITHSUNDEEP
csssvg
Subham Burnwal
Subham Burnwal

Reputation: 369

How to make an svg text's position depend on another text's position?

Here is an SVG with two texts one below the other. I need to keep the first text always at a fixed position from the next text, And it would be better if this gap could be responsive, that is, it should decrease if size of svg is reduced, and increase accordingly as well. I searched a lot and found a lot of answers that went over my head. Cant we do something that looks like y=".text--line2.y" ?

Here is the 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>

Upvotes: 0

Views: 2096

Answers (1)

ccprog
ccprog

Reputation: 21811

You can position parts of a string with the dx and dy attributes. The attribute describes the position of the next tspan relative to the end of the previous one. Imagine it like this: initially, "abcde" and "fghij" would be rendered in one line, next to each other. Setting a dx/dy then moves the "fghij" by that amount.

Remember that whitespace also results in a horizontal advance. If you use percentage values, they are in relation to the size of the viewport (the <svg> element, not its viewBox).

.text--line {
  font-size: .5em;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
  font: 5em/1 Arial;
}
<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>

Upvotes: 1

Related Questions