如何在没有视图框的情况下相互绘制svg形状

Question

我找到了一个写着字母的书记员。

https://codepen.io/scnijland/pen/xRGjBw

问:我如何在一个SVG中写出彼此相邻的形状，每个SVG只有一行？当我尝试的时候，这些字母重叠得很厉害。

我想要

<svg .....>
  <path for letter a />
  <path for letter b />
  <path for letter c />
</svg>

最后，如果可能的话，我想让这些字母随机产生，一笔一笔地写下来。

<svg .....>
  <path for left downstroke letter a />
  <path for right downstroke letter a />
  <path for bridge letter a />
  <path for vertical bar letter b />
  <path for top arch letter b />
  <path for bottom arch letter b />
  <path for top half arch letter c />
  <path for bottom half arch letter c />
</svg>

片段：

​

svg {
  display: inline-block;
  width: 150px;
  stroke: #000;
}
path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5px;
  transition: 1s;
}

<svg class="letter--a" viewBox="0 0 80 100">
  <path d="M5,90
           l30,-80 30,80
           M20,50
           l30,0" />
</svg>
<svg class="letter--b" viewBox="0 0 80 100">
  <path d="M5,5
           c80,0 80,45 0,45
           c80,0 80,45 0,45z" />
</svg>
<svg class="letter--c" viewBox="0 0 80 100">
  <path d="M60,10
           C-10,0 -10,100 60,90" />
</svg>

​

Answer 1

在这种情况下，我可能会考虑翻译。您需要为每个字母添加80翻译(或者对一些字母(如i和j)添加更少的)，并增加查看框以包含所有这些内容：

​

svg {
  display: inline-block;
  width: 150px;
  stroke: #000;
}

path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5px;
  transition: 1s;
}

.letter--a {
  stroke-width: 1px; 
  stroke:green;
}

.letter--f {
  stroke-width: 3px; 
  stroke:red;
}

<svg viewBox="0 0 320 100">
  <path class="letter--a" d="M5,90
           l30,-80 30,80
           M20,50
           l30,0" />
  <path class="letter--f" transform=translate(80) d="M75,5
           l-60,0 0,90
           M15,45
           l50,0" />
  <path class="letter--i" transform=translate(160) d="M5,5
           l20,0 -10,0 0,85 -10,0 20,0" />
           
  <path class="letter--f" transform=translate(200) d="M75,5
           l-60,0 0,90
           M15,45
           l50,0" />
</svg>

​

只有部分字母可见的想法是考虑stroke-dasharray和/或stroke-dashoffset，并根据需要调整值：

​

svg {
  display: inline-block;
  width: 150px;
  stroke: #000;
}

path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5px;
  transition: 1s;
}

.letter--a {
  stroke-width: 2px;
  stroke: green;
  stroke-dasharray: 84, 139;
}

.letter--f {
  stroke-width: 3px;
  stroke: red;
  stroke-dasharray: 96, 145;
}

.letter--c {
  stroke-width: 8px;
  stroke: blue;
  stroke-dasharray: 84, 139;
}

.letter--c-b {
  stroke-width: 5px;
  stroke: yellow;
  stroke-dasharray: 84, 139;
  stroke-dashoffset: -89;
}

<svg viewBox="0 0 400 100">
<path class="letter--a" d="M5,90
           l30,-80 30,80
           M20,50
           l30,0" />
<path class="letter--f" transform=translate(80) d="M75,5
           l-60,0 0,90
           M15,45
           l50,0" />
  <path class="letter--i" transform=translate(160) d="M5,5
           l20,0 -10,0 0,85 -10,0 20,0" />
           
  <path class="letter--f" transform=translate(200) d="M75,5
           l-60,0 0,90
           M15,45
           l50,0" />
  <path class="letter--c" transform=translate(280)  d="M60,10
           C-10,0 -10,100 60,90" /> 
  <path class="letter--c-b" transform=translate(280)  d="M60,10
           C-10,0 -10,100 60,90" /> 
</svg>

​