自定义 SVG 路径

Customize SVG path

我基本上想在两行中写文本(ICSE),即第一行有单词 IC 和紧挨着 IC 单词 SE[ 下方的下一行=24=]。纠结代码好久没弄明白

<svg width="48.88" height="14.48" viewBox="0 0 48.88 14.48" xmlns="http://www.w3.org/2000/svg">
  <g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#000" stroke-width="0.25mm" fill="black" style="stroke:#000;stroke-width:0.25mm;fill:black">
<path d="M 0.74 0.8 L 0 0.64 L 0 0.24 L 6.52 0.24 L 6.52 0.64 L 5.78 0.8 Q 5.48 0.86 5.39 0.94 A 0.218 0.218 0 0 0 5.336 1.018 Q 5.306 1.088 5.301 1.197 A 0.977 0.977 0 0 0 5.3 1.24 L 5.3 13.24 A 0.842 0.842 0 0 0 5.306 13.341 Q 5.319 13.449 5.363 13.51 A 0.19 0.19 0 0 0 5.39 13.54 A 0.297 0.297 0 0 0 5.45 13.58 Q 5.557 13.636 5.78 13.68 L 6.52 13.84 L 6.52 14.24 L 0 14.24 L 0 13.84 L 0.74 13.68 Q 1.04 13.62 1.13 13.54 A 0.218 0.218 0 0 0 1.184 13.462 Q 1.214 13.392 1.219 13.283 A 0.977 0.977 0 0 0 1.22 13.24 L 1.22 1.24 Q 1.22 1.057 1.157 0.971 A 0.19 0.19 0 0 0 1.13 0.94 A 0.297 0.297 0 0 0 1.07 0.9 Q 0.963 0.845 0.74 0.8 Z" id="0" vector-effect="non-scaling-stroke" />
<path d="M 20.92 12.12 L 21.32 12.56 Q 20.44 13.38 19.03 13.93 A 8.074 8.074 0 0 1 16.853 14.437 A 9.807 9.807 0 0 1 15.92 14.48 A 10.447 10.447 0 0 1 13.433 14.199 A 7.542 7.542 0 0 1 10.4 12.71 A 5.469 5.469 0 0 1 8.691 10.16 Q 8.381 9.24 8.284 8.111 A 12.532 12.532 0 0 1 8.24 7.04 A 9.631 9.631 0 0 1 8.44 5.011 Q 8.708 3.765 9.339 2.841 A 5.127 5.127 0 0 1 10.39 1.71 A 7.566 7.566 0 0 1 13.366 0.293 Q 14.465 0.028 15.752 0.003 A 13.853 13.853 0 0 1 16.02 0 Q 17.42 0 18.78 0.26 A 13.97 13.97 0 0 1 19.573 0.434 Q 20.384 0.639 20.92 0.9 L 20.64 4.34 L 20.08 4.34 A 9.235 9.235 0 0 0 19.538 3.025 Q 19.185 2.334 18.738 1.802 A 5.423 5.423 0 0 0 18.57 1.61 A 3.146 3.146 0 0 0 16.565 0.61 A 4.391 4.391 0 0 0 16.04 0.58 A 3.455 3.455 0 0 0 14.968 0.737 Q 13.964 1.063 13.43 2.07 A 5.445 5.445 0 0 0 12.997 3.206 Q 12.64 4.531 12.64 6.52 A 19.291 19.291 0 0 0 12.721 8.349 Q 12.898 10.206 13.466 11.386 A 4.903 4.903 0 0 0 13.66 11.75 A 3.335 3.335 0 0 0 15.79 13.311 Q 16.394 13.468 17.128 13.479 A 7.428 7.428 0 0 0 17.24 13.48 Q 18.34 13.48 19.23 13.12 A 6.69 6.69 0 0 0 20.769 12.238 A 7.53 7.53 0 0 0 20.92 12.12 Z" id="1" vector-effect="non-scaling-stroke" />
<path d="M 33.62 0.92 L 33.14 3.98 L 32.6 3.98 A 15.149 15.149 0 0 0 32.335 3.2 Q 32.199 2.835 32.059 2.53 A 6.303 6.303 0 0 0 31.81 2.04 Q 31.4 1.32 30.7 0.93 Q 30.162 0.631 29.353 0.561 A 6.006 6.006 0 0 0 28.84 0.54 Q 26.2 0.54 26.2 2.26 A 2.526 2.526 0 0 0 26.249 2.77 Q 26.318 3.105 26.484 3.367 A 1.576 1.576 0 0 0 26.52 3.42 A 2.346 2.346 0 0 0 26.89 3.832 Q 27.078 3.998 27.316 4.15 A 4.313 4.313 0 0 0 27.48 4.25 Q 28.096 4.606 29.491 5.287 A 99.663 99.663 0 0 0 29.6 5.34 L 30 5.52 Q 31.86 6.42 32.75 6.98 A 4.529 4.529 0 0 1 33.838 7.925 A 4.172 4.172 0 0 1 34.16 8.37 A 3.175 3.175 0 0 1 34.542 9.289 Q 34.68 9.839 34.68 10.52 Q 34.68 12.48 33.21 13.48 A 4.677 4.677 0 0 1 32.006 14.048 Q 30.847 14.421 29.151 14.472 A 18.343 18.343 0 0 1 28.6 14.48 Q 27.35 14.48 25.834 14.204 A 21.095 21.095 0 0 1 25.81 14.2 A 16.273 16.273 0 0 1 24.921 14.013 Q 24.063 13.806 23.498 13.547 A 4.409 4.409 0 0 1 23.44 13.52 L 23.98 10 L 24.5 10 Q 24.76 11.56 25.28 12.42 Q 25.8 13.28 26.58 13.61 Q 27.247 13.892 28.176 13.933 A 7.352 7.352 0 0 0 28.5 13.94 A 5.476 5.476 0 0 0 29.256 13.891 Q 29.652 13.836 29.976 13.718 A 2.379 2.379 0 0 0 30.52 13.44 A 1.6 1.6 0 0 0 31.222 12.283 A 2.209 2.209 0 0 0 31.24 12 A 2.884 2.884 0 0 0 31.19 11.446 Q 31.123 11.107 30.97 10.838 A 1.732 1.732 0 0 0 30.91 10.74 A 2.532 2.532 0 0 0 30.524 10.289 Q 30.261 10.043 29.9 9.82 A 8.953 8.953 0 0 0 29.426 9.549 Q 28.903 9.269 28.152 8.932 A 35.034 35.034 0 0 0 27.9 8.82 A 36.503 36.503 0 0 1 26.924 8.374 Q 26.037 7.952 25.437 7.594 A 9.855 9.855 0 0 1 25.3 7.51 Q 24.38 6.94 23.85 6.07 Q 23.378 5.295 23.326 4.148 A 6.398 6.398 0 0 1 23.32 3.86 A 4.289 4.289 0 0 1 23.477 2.665 A 3.077 3.077 0 0 1 24.68 0.97 A 4.225 4.225 0 0 1 25.804 0.418 Q 26.886 0.057 28.482 0.008 A 16.787 16.787 0 0 1 29 0 Q 30.32 0 31.55 0.26 A 12.2 12.2 0 0 1 32.485 0.494 Q 33.121 0.683 33.62 0.92 Z" id="2" vector-effect="non-scaling-stroke" />
<path d="M 36.28 13.84 L 37.02 13.68 Q 37.32 13.62 37.41 13.54 A 0.218 0.218 0 0 0 37.464 13.462 Q 37.494 13.392 37.499 13.283 A 0.977 0.977 0 0 0 37.5 13.24 L 37.5 1.24 Q 37.5 1.057 37.437 0.971 A 0.19 0.19 0 0 0 37.41 0.94 A 0.297 0.297 0 0 0 37.35 0.9 Q 37.243 0.845 37.02 0.8 L 36.28 0.64 L 36.28 0.24 L 48.6 0.24 L 48.6 4.14 L 48.1 4.14 A 20.252 20.252 0 0 0 47.855 3.425 Q 47.611 2.755 47.385 2.319 A 4.763 4.763 0 0 0 47.31 2.18 Q 46.94 1.52 46.28 1.18 A 2.577 2.577 0 0 0 45.736 0.98 Q 45.197 0.842 44.444 0.84 A 8.43 8.43 0 0 0 44.42 0.84 L 41.58 0.84 L 41.58 6.78 L 46.74 6.78 L 46.74 7.38 L 41.58 7.38 L 41.58 13.64 L 44.62 13.64 A 6.321 6.321 0 0 0 45.309 13.605 Q 46.012 13.528 46.48 13.28 Q 47.16 12.92 47.55 12.24 A 5.965 5.965 0 0 0 47.797 11.755 Q 48.033 11.238 48.279 10.506 A 21.598 21.598 0 0 0 48.36 10.26 L 48.88 10.26 L 48.88 14.24 L 36.28 14.24 L 36.28 13.84 Z" id="3" vector-effect="non-scaling-stroke" />
  </g>
</svg>

在这个例子中,我移动了所有路径的坐标,使 0,0 位于字母的中间。她你可以在工具中看到“我”SvgPathEditor:

现在所有字母都可以使用 transform/translate 对齐。

<svg width="200" viewBox="0 0 30 32" xmlns="http://www.w3.org/2000/svg">
  <g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#000" stroke-width="0.25mm" fill="black" style="stroke:#000;stroke-width:0.25mm;fill:black"
    transform="translate(7 8)">
<path transform="translate(0 0)" d="M -2.52 -6.44 L -3.26 -6.6 L -3.26 -7 L 3.26 -7 L 3.26 -6.6 L 2.52 -6.44 Q 2.22 -6.38 2.13 -6.3 A 0.218 0.218 0 0 0 2.076 -6.222 Q 2.046 -6.152 2.041 -6.043 A 0.977 0.977 0 0 0 2.04 -6 L 2.04 6 A 0.842 0.842 0 0 0 2.046 6.101 Q 2.059 6.209 2.103 6.27 A 0.19 0.19 0 0 0 2.13 6.3 A 0.297 0.297 0 0 0 2.19 6.34 Q 2.297 6.396 2.52 6.44 L 3.26 6.6 L 3.26 7 L -3.26 7 L -3.26 6.6 L -2.52 6.44 Q -2.22 6.38 -2.13 6.3 A 0.218 0.218 0 0 0 -2.076 6.222 Q -2.046 6.152 -2.041 6.043 A 0.977 0.977 0 0 0 -2.04 6 L -2.04 -6 Q -2.04 -6.183 -2.103 -6.269 A 0.19 0.19 0 0 0 -2.13 -6.3 A 0.297 0.297 0 0 0 -2.19 -6.34 Q -2.297 -6.395 -2.52 -6.44 Z" id="0" vector-effect="non-scaling-stroke" />
<path transform="translate(12 0)" d="M 6.14 4.88 L 6.54 5.32 Q 5.66 6.14 4.25 6.69 A 8.074 8.074 0 0 1 2.073 7.197 A 9.807 9.807 0 0 1 1.14 7.24 A 10.447 10.447 0 0 1 -1.347 6.959 A 7.542 7.542 0 0 1 -4.38 5.47 A 5.469 5.469 0 0 1 -6.089 2.92 Q -6.399 2 -6.496 0.871 A 12.532 12.532 0 0 1 -6.54 -0.2 A 9.631 9.631 0 0 1 -6.34 -2.229 Q -6.072 -3.475 -5.441 -4.399 A 5.127 5.127 0 0 1 -4.39 -5.53 A 7.566 7.566 0 0 1 -1.414 -6.947 Q -0.315 -7.212 0.972 -7.237 A 13.853 13.853 0 0 1 1.24 -7.24 Q 2.64 -7.24 4 -6.98 A 13.97 13.97 0 0 1 4.793 -6.806 Q 5.604 -6.601 6.14 -6.34 L 5.86 -2.9 L 5.3 -2.9 A 9.235 9.235 0 0 0 4.758 -4.215 Q 4.405 -4.906 3.958 -5.438 A 5.423 5.423 0 0 0 3.79 -5.63 A 3.146 3.146 0 0 0 1.785 -6.63 A 4.391 4.391 0 0 0 1.26 -6.66 A 3.455 3.455 0 0 0 0.188 -6.503 Q -0.816 -6.177 -1.35 -5.17 A 5.445 5.445 0 0 0 -1.783 -4.034 Q -2.14 -2.709 -2.14 -0.72 A 19.291 19.291 0 0 0 -2.059 1.109 Q -1.882 2.966 -1.314 4.146 A 4.903 4.903 0 0 0 -1.12 4.51 A 3.335 3.335 0 0 0 1.01 6.071 Q 1.614 6.228 2.348 6.239 A 7.428 7.428 0 0 0 2.46 6.24 Q 3.56 6.24 4.45 5.88 A 6.69 6.69 0 0 0 5.989 4.998 A 7.53 7.53 0 0 0 6.14 4.88 Z" id="1" vector-effect="non-scaling-stroke" />
<path transform="translate(0 16)" d="M 4.62 -6.32 L 4.14 -3.26 L 3.6 -3.26 A 15.149 15.149 0 0 0 3.335 -4.04 Q 3.199 -4.405 3.059 -4.71 A 6.303 6.303 0 0 0 2.81 -5.2 Q 2.4 -5.92 1.7 -6.31 Q 1.162 -6.609 0.353 -6.679 A 6.006 6.006 0 0 0 -0.16 -6.7 Q -2.8 -6.7 -2.8 -4.98 A 2.526 2.526 0 0 0 -2.751 -4.47 Q -2.682 -4.135 -2.516 -3.873 A 1.576 1.576 0 0 0 -2.48 -3.82 A 2.346 2.346 0 0 0 -2.11 -3.408 Q -1.922 -3.242 -1.684 -3.09 A 4.313 4.313 0 0 0 -1.52 -2.99 Q -0.904 -2.634 0.491 -1.953 A 99.663 99.663 0 0 0 0.6 -1.9 L 1 -1.72 Q 2.86 -0.82 3.75 -0.26 A 4.529 4.529 0 0 1 4.838 0.685 A 4.172 4.172 0 0 1 5.16 1.13 A 3.175 3.175 0 0 1 5.542 2.049 Q 5.68 2.599 5.68 3.28 Q 5.68 5.24 4.21 6.24 A 4.677 4.677 0 0 1 3.006 6.808 Q 1.847 7.181 0.151 7.232 A 18.343 18.343 0 0 1 -0.4 7.24 Q -1.65 7.24 -3.166 6.964 A 21.095 21.095 0 0 1 -3.19 6.96 A 16.273 16.273 0 0 1 -4.079 6.773 Q -4.937 6.566 -5.502 6.307 A 4.409 4.409 0 0 1 -5.56 6.28 L -5.02 2.76 L -4.5 2.76 Q -4.24 4.32 -3.72 5.18 Q -3.2 6.04 -2.42 6.37 Q -1.753 6.652 -0.824 6.693 A 7.352 7.352 0 0 0 -0.5 6.7 A 5.476 5.476 0 0 0 0.256 6.651 Q 0.652 6.596 0.976 6.478 A 2.379 2.379 0 0 0 1.52 6.2 A 1.6 1.6 0 0 0 2.222 5.043 A 2.209 2.209 0 0 0 2.24 4.76 A 2.884 2.884 0 0 0 2.19 4.206 Q 2.123 3.867 1.97 3.598 A 1.732 1.732 0 0 0 1.91 3.5 A 2.532 2.532 0 0 0 1.524 3.049 Q 1.261 2.803 0.9 2.58 A 8.953 8.953 0 0 0 0.426 2.309 Q -0.097 2.029 -0.848 1.692 A 35.034 35.034 0 0 0 -1.1 1.58 A 36.503 36.503 0 0 1 -2.076 1.134 Q -2.963 0.712 -3.563 0.354 A 9.855 9.855 0 0 1 -3.7 0.27 Q -4.62 -0.3 -5.15 -1.17 Q -5.622 -1.945 -5.674 -3.092 A 6.398 6.398 0 0 1 -5.68 -3.38 A 4.289 4.289 0 0 1 -5.523 -4.575 A 3.077 3.077 0 0 1 -4.32 -6.27 A 4.225 4.225 0 0 1 -3.196 -6.822 Q -2.114 -7.183 -0.518 -7.232 A 16.787 16.787 0 0 1 -0 -7.24 Q 1.32 -7.24 2.55 -6.98 A 12.2 12.2 0 0 1 3.485 -6.746 Q 4.121 -6.557 4.62 -6.32 Z" id="2" vector-effect="non-scaling-stroke" />
<path transform="translate(12 16)" d="M -6.3 6.6 L -5.56 6.44 Q -5.26 6.38 -5.17 6.3 A 0.218 0.218 0 0 0 -5.116 6.222 Q -5.086 6.152 -5.081 6.043 A 0.977 0.977 0 0 0 -5.08 6 L -5.08 -6 Q -5.08 -6.183 -5.143 -6.269 A 0.19 0.19 0 0 0 -5.17 -6.3 A 0.297 0.297 0 0 0 -5.23 -6.34 Q -5.337 -6.395 -5.56 -6.44 L -6.3 -6.6 L -6.3 -7 L 6.02 -7 L 6.02 -3.1 L 5.52 -3.1 A 20.252 20.252 0 0 0 5.275 -3.815 Q 5.031 -4.485 4.805 -4.921 A 4.763 4.763 0 0 0 4.73 -5.06 Q 4.36 -5.72 3.7 -6.06 A 2.577 2.577 0 0 0 3.156 -6.26 Q 2.617 -6.398 1.864 -6.4 A 8.43 8.43 0 0 0 1.84 -6.4 L -1 -6.4 L -1 -0.46 L 4.16 -0.46 L 4.16 0.14 L -1 0.14 L -1 6.4 L 2.04 6.4 A 6.321 6.321 0 0 0 2.729 6.365 Q 3.432 6.288 3.9 6.04 Q 4.58 5.68 4.97 5 A 5.965 5.965 0 0 0 5.217 4.515 Q 5.453 3.998 5.699 3.266 A 21.598 21.598 0 0 0 5.78 3.02 L 6.3 3.02 L 6.3 7 L -6.3 7 L -6.3 6.6 Z" id="3" vector-effect="non-scaling-stroke" />
  </g>
</svg>