Question

我发现了一个带字母的编码器。

问题：如何在一个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>

如何在没有每个

1 个答案: