程序问答   发布时间:2022-06-01  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了我需要在 SVG 象限内添加文本大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决我需要在 SVG 象限内添加文本?

开发过程中遇到我需要在 SVG 象限内添加文本的问题如何解决?下面主要结合日常开发的经验,给出你关于我需要在 SVG 象限内添加文本的解决方法建议,希望对你解决我需要在 SVG 象限内添加文本有所启发或帮助;

下面是我的 SVG 代码。我需要在每个路径内添加文本。文本应该对齐,而不是弧形。 输出应该与附加的图像类似。有人可以指导我如何在图像中的 SVG 象限内添加文本:

我需要在 SVG 象限内添加文本

<svg version='1.0' xmlns='http://www.w3.org/2000/svg'
 wIDth='300.000000pt' height='300.000000pt' vIEwBox='0 0 300.000000 300.000000'>
<Metadata>
</Metadata>
<g transform='translate(0.000000,300.000000) scale(0.050000,-0.050000)'
fill='' stroke='none'>
<path d='M2710 5967 c-625 -60 -1139 -275 -1637 -687 l-177 -146 606 -606 606
-606 51 40 c221 173 499 294 692 301 120 5 110 -76 104 887 l-5 840 -240 -23z'
style='fill:#2eb82e;'
/>
<path d='M3045 5131 l5 -859 90 -6 c195 -13 442 -110 621 -245 59 -45 113 -81
119 -81 5 0 280 270 610 601 l600 601 -50 41 c-27 22 -82 71 -122 107 -389
357 -1062 631 -1683 684 l-195 16 5 -859z'
style='fill:#ffff00;'
/>
<path d='M820 5042 c-16 -20 -68 -80 -115 -132 -367 -408 -635 -1073 -676
-1675 l-13 -195 852 0 c668 0 852 5 853 25 7 226 137 561 284 727 l62 71 -609
608 c-570 570 -610 606 -638 571z'
style='fill:#2eb82e;'
/>
<path d='M4532 4482 c-431 -431 -593 -605 -580 -625 9 -15 44 -63 77 -107 57
-74 136 -224 187 -352 11 -29 32 -121 46 -205 l26 -153 848 0 849 0 -14 205
c-32 468 -192 954 -446 1355 -83 131 -360 480 -381 480 -8 0 -283 -269 -612
-598z'
style='fill:#2eb82e;'
/>
<path d='M31 2755 c41 -620 317 -1278 728 -1735 l99 -110 606 605 c462 462
601 611 586 632 -11 15 -54 71 -95 125 -92 121 -186 358 -217 546 l-24 142
-849 0 -848 0 14 -205z'
style='fill:#2eb82e;'
/>
<path d='M4261 2810 c-36 -226 -147 -475 -272 -610 -25 -27 -49 -61 -53 -74
-7 -27 1160 -1206 1194 -1206 11 0 61 48 112 105 304 347 549 812 647 1226 63
265 68 300 82 504 l14 205 -850 0 -850 0 -24 -150z'
style='fill:#2eb82e;'
/>
<path d='M1513 1463 l-597 -597 97 -91 c427 -404 1097 -698 1697 -744 88 -7
180 -17 205 -22 l45 -10 0 861 0 860 -55 0 c-55 0 -141 19 -295 64 -107 32
-280 124 -388 208 -49 37 -94 68 -100 68 -7 0 -281 -269 -609 -597z'
style='fill:#2eb82e;'
/>
<path d='M3777 1994 c-139 -124 -401 -231 -642 -265 l-95 -14 0 -858 0 -858
45 10 c25 5 117 14 205 21 582 44 1262 339 1695 736 l94 87 -605 603 c-333
332 -609 604 -614 603 -6 0 -43 -30 -83 -65z'
style='fill:#2eb82e;'
/>
</g>
</svg>

解决方法

你的问题是你需要计算每个橙片的中心点,
您希望文本居中的位置。

对于您拥有的路径,这将需要大量的数学运算。特别是当您希望文本更靠近中心或外缘时。

如果您习惯于使用现代 Web 组件;

Pie-Meister.github.io 从 语义 HTML

创建饼图

我需要在 SVG 象限内添加文本

这将创建切片定位标签。

关于 pull=10pulltext=100 的作用的完整文档:Pie-Meister.github.io

你的工作然后是填充标签,对 <tspan> 进行一些处理,因为 SVG 不进行换行

需要所有代码:

也在:https://jsfiddle.net/WebComponents/9y1nw7g6/

<script src="https://pie-meister.github.io/PieMeister-with-Progress.js"></script>
<pie-chart pull="10" pulltext="100">
  <style>
    ::part(path) { stroke: orange }
    ::part(text) { font-size: 40px; text-anchor:middle; }
  </style>
  <slice size="1" pull="10"><!--<text>--></slice>
  <slice size="1" pull="10"><!--<text>--></slice>
  <slice size="1" pull="10"><!--<text>--></slice>
  <slice size="1" pull="10"><!--<text>--></slice>
  <slice size="1" pull="10"><!--<text>--></slice>
  <slice size="1" pull="10"><!--<text>--></slice>
  <circle cx="50%" cy="50%" r="20%" fill="white"></circle>
</pie-chart>
<script>
  setTimeout(() => { // adding text after all <pie-chart> DOM is created
    let pie = document.querySELEctor("pie-chart");
    let svg = pie.shadowRoot.querySELEctor("svg");
    svg.querySELEctorAll("g").forEach(slice => {
      slice.querySELEctor("text").innerHTML = `<tspan>Lorem</tspan>
    <tspan dx="-150px" dy="40px">IpsumLorem</tspan>
    <tspan dx="-180px" dy="40px">Ipsum</tspan>`;
   // Helper middlePoint in each slice where pulltext pulls the text to:
      let pulltext = number(pie.getAttribute("pulltext"));
      let middlePoint = slice.querySELEctor("path").getPoint(0,pulltext);
      let c = document.createElementNS("http://www.w3.org/2000/svg","circle");
      c.setAttribute("cx",middlePoint.X);c.setAttribute("cy",middlePoint.y);
      c.setAttribute("r",20);c.setAttribute("fill","red");
      svg.append(c);
      
    })})</script>

,

如果你想保留SVG格式那么你需要通过设计工具或照片编辑器修改它,我使用Figma并在保留ID属性的同时导出整个SVG

  <svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g id="Frame" clip-path="url(#clip0)">
    <g id="Group">
    <path id="Vector" d="M134.7 1.15001C103.45 4.15001 77.75 14.9 52.85 35.5L44 42.8L74.3 73.1L104.6 103.4L107.15 101.4C118.2 92.75 132.1 86.7 141.75 86.35C147.75 86.1 147.25 90.15 146.95 42L146.7 7.61449e-06L134.7 1.15001Z" fill="#FF5005"/>
    <path id="Vector_2" d="M151.45 42.95L151.7 85.9L156.2 86.2C165.95 86.85 178.3 91.7 187.25 98.45C190.2 100.7 192.9 102.5 193.2 102.5C193.45 102.5 207.2 89 223.7 72.45L253.7 42.4L251.2 40.35C249.85 39.25 247.1 36.8 245.1 35C225.65 17.15 192 3.45001 160.95 0.800014L151.2 1.37314e-05L151.45 42.95Z" fill="#FF5005"/>
    <path id="Vector_3" d="M40.2 47.4C39.4 48.4 36.8 51.4 34.45 54C16.1 74.4 2.7 107.65 0.65 137.75L0 147.5H42.6C76 147.5 85.2 147.25 85.25 146.25C85.6 134.95 92.1 118.2 99.45 109.9L102.55 106.35L72.1 75.95C43.6 47.45 41.6 45.65 40.2 47.4Z" fill="#FF5005"/>
    <path id="Vector_4" d="M225.8 75.4C204.25 96.95 196.15 105.65 196.8 106.65C197.25 107.4 199 109.8 200.65 112C203.5 115.7 207.45 123.2 210 129.6C210.55 131.05 211.6 135.65 212.3 139.85L213.6 147.5H256H298.45L297.75 137.25C296.15 113.85 288.15 89.55 275.45 69.5C271.3 62.95 257.45 45.5 256.4 45.5C256 45.5 242.25 58.95 225.8 75.4Z" fill="#FF5005"/>
    <path id="Vector_5" d="M0.749988 161.75C2.79999 192.75 16.6 225.65 37.15 248.5L42.1 254L72.4 223.75C95.5 200.65 102.45 193.2 101.7 192.15C101.15 191.4 99 188.6 96.95 185.9C92.35 179.85 87.65 168 86.1 158.6L84.9 151.5H42.45H0.0499878L0.749988 161.75Z" fill="#FF5005"/>
    <path id="Vector_6" d="M212.25 159C210.45 170.3 204.9 182.75 198.65 189.5C197.4 190.85 196.2 192.55 196 193.2C195.65 194.55 254 253.5 255.7 253.5C256.25 253.5 258.75 251.1 261.3 248.25C276.5 230.9 288.75 207.65 293.65 186.95C296.8 173.7 297.05 171.95 297.75 161.75L298.45 151.5H255.95H213.45L212.25 159Z" fill="#FF5005"/>
    <path id="Vector_7" d="M74.85 226.35L45 256.2L49.85 260.75C71.2 280.95 104.7 295.65 134.7 297.95C139.1 298.3 143.7 298.8 144.95 299.05L147.2 299.55V256.5V213.5H144.45C141.7 213.5 137.4 212.55 129.7 210.3C124.35 208.7 115.7 204.1 110.3 199.9C107.85 198.05 105.6 196.5 105.3 196.5C104.95 196.5 91.25 209.95 74.85 226.35Z" fill="#FF5005"/>
    <path id="Vector_8" d="M188.05 199.8C181.1 206 168 211.35 155.95 213.05L151.2 213.75V256.65V299.55L153.45 299.05C154.7 298.8 159.3 298.35 163.7 298C192.8 295.8 226.8 281.05 248.45 261.2L253.15 256.85L222.9 226.7C206.25 210.1 192.45 196.5 192.2 196.55C191.9 196.55 190.05 198.05 188.05 199.8Z" fill="#FF5005"/>
    </g>
    <path id="lorem8" d="M93.5439 39.2334H96.9131V40H92.6016V32.8906H93.5439V39.2334ZM97.6016 37.3096C97.6016 36.792 97.7025 36.3265 97.9043 35.9131C98.1094 35.4997 98.3926 35.1807 98.7539 34.9561C99.1185 34.7314 99.5335 34.6191 99.999 34.6191C100.718 34.6191 101.299 34.8682 101.742 35.3662C102.188 35.8643 102.411 36.5267 102.411 37.3535V37.417C102.411 37.9313 102.312 38.3936 102.113 38.8037C101.918 39.2106 101.636 39.528 101.269 39.7559C100.904 39.9837 100.484 40.0977 100.009 40.0977C99.2926 40.0977 98.7116 39.8486 98.2656 39.3506C97.8229 38.8525 97.6016 38.1934 97.6016 37.373V37.3096ZM98.5098 37.417C98.5098 38.0029 98.6449 38.4733 98.915 38.8281C99.1885 39.1829 99.5531 39.3604 100.009 39.3604C100.468 39.3604 100.832 39.1813 101.103 38.8232C101.373 38.4619 101.508 37.9574 101.508 37.3096C101.508 36.7301 101.369 36.2614 101.093 35.9033C100.819 35.542 100.455 35.3613 99.999 35.3613C99.5531 35.3613 99.1934 35.5387 98.9199 35.8936C98.6465 36.2484 98.5098 36.7562 98.5098 37.417ZM106.098 35.5273C105.961 35.5046 105.813 35.4932 105.653 35.4932C105.061 35.4932 104.659 35.7454 104.447 36.25V40H103.544V34.7168H104.423L104.438 35.3271C104.734 34.8551 105.154 34.6191 105.697 34.6191C105.873 34.6191 106.007 34.6419 106.098 34.6875V35.5273ZM109.027 40.0977C108.311 40.0977 107.729 39.8633 107.279 39.3945C106.83 38.9225 106.605 38.2926 106.605 37.5049V37.3389C106.605 36.8148 106.705 36.3477 106.903 35.9375C107.105 35.5241 107.385 35.2018 107.743 34.9707C108.104 34.7363 108.495 34.6191 108.915 34.6191C109.602 34.6191 110.136 34.8454 110.517 35.2979C110.897 35.7503 111.088 36.3981 111.088 37.2412V37.6172H107.509C107.522 38.138 107.673 38.5596 107.963 38.8818C108.256 39.2008 108.627 39.3604 109.076 39.3604C109.395 39.3604 109.665 39.2952 109.887 39.165C110.108 39.0348 110.302 38.8623 110.468 38.6475L111.02 39.0771C110.577 39.7575 109.913 40.0977 109.027 40.0977ZM108.915 35.3613C108.55 35.3613 108.244 35.4948 107.997 35.7617C107.75 36.0254 107.597 36.3965 107.538 36.875H110.185V36.8066C110.159 36.3477 110.035 35.9928 109.813 35.7422C109.592 35.4883 109.293 35.3613 108.915 35.3613ZM112.987 34.7168L113.012 35.3027C113.399 34.847 113.922 34.6191 114.579 34.6191C115.318 34.6191 115.821 34.9023 116.088 35.4688C116.264 35.2148 116.492 35.0098 116.771 34.8535C117.055 34.6973 117.388 34.6191 117.772 34.6191C118.931 34.6191 119.521 35.2327 119.54 36.46V40H118.637V36.5137C118.637 36.1361 118.55 35.8545 118.378 35.6689C118.205 35.4801 117.916 35.3857 117.509 35.3857C117.174 35.3857 116.895 35.4867 116.674 35.6885C116.452 35.887 116.324 36.1556 116.288 36.4941V40H115.38V36.5381C115.38 35.7699 115.004 35.3857 114.252 35.3857C113.66 35.3857 113.254 35.638 113.036 36.1426V40H112.133V34.7168H112.987ZM79.7158 52H78.7783V44.8906H79.7158V52ZM85.7559 49.417C85.7559 50.221 85.5719 50.8688 85.2041 51.3604C84.8363 51.8519 84.3382 52.0977 83.71 52.0977C83.0687 52.0977 82.5641 51.8942 82.1963 51.4873V54.0312H81.293V46.7168H82.1182L82.1621 47.3027C82.5299 46.847 83.041 46.6191 83.6953 46.6191C84.3301 46.6191 84.8314 46.8584 85.1992 47.3369C85.5703 47.8154 85.7559 48.4811 85.7559 49.334V49.417ZM84.8525 49.3145C84.8525 48.7188 84.7256 48.2484 84.4717 47.9033C84.2178 47.5583 83.8695 47.3857 83.4268 47.3857C82.8799 47.3857 82.4697 47.6283 82.1963 48.1133V50.6377C82.4665 51.1195 82.8799 51.3604 83.4365 51.3604C83.8695 51.3604 84.2129 51.1895 84.4668 50.8477C84.724 50.5026 84.8525 49.9915 84.8525 49.3145ZM89.9844 50.5986C89.9844 50.3545 89.8916 50.1657 89.7061 50.0322C89.5238 49.8955 89.2031 49.7783 88.7441 49.6807C88.2884 49.583 87.9255 49.4658 87.6553 49.3291C87.3883 49.1924 87.1898 49.0296 87.0596 48.8408C86.9326 48.652 86.8691 48.4274 86.8691 48.167C86.8691 47.734 87.0514 47.3678 87.416 47.0684C87.7839 46.7689 88.2526 46.6191 88.8223 46.6191C89.4212 46.6191 89.9062 46.7738 90.2773 47.083C90.6517 47.3923 90.8389 47.7878 90.8389 48.2695H89.9307C89.9307 48.0221 89.8249 47.8089 89.6133 47.6299C89.4049 47.4508 89.1413 47.3613 88.8223 47.3613C88.4935 47.3613 88.2363 47.4329 88.0508 47.5762C87.8652 47.7194 87.7725 47.9066 87.7725 48.1377C87.7725 48.3558 87.8587 48.5202 88.0312 48.6309C88.2038 48.7415 88.5146 48.8473 88.9639 48.9482C89.4163 49.0492 89.7826 49.1696 90.0625 49.3096C90.3424 49.4495 90.5492 49.6188 90.6826 49.8174C90.8193 50.0127 90.8877 50.252 90.8877 50.5352C90.8877 51.0072 90.6989 51.3864 90.3213 51.6729C89.9437 51.9561 89.4538 52.0977 88.8516 52.0977C88.4284 52.0977 88.054 52.0228 87.7285 51.873C87.403 51.7233 87.1475 51.515 86.9619 51.248C86.7796 50.9779 86.6885 50.6865 86.6885 50.374H87.5918C87.6081 50.6768 87.7285 50.9176 87.9531 51.0967C88.181 51.2725 88.4805 51.3604 88.8516 51.3604C89.1934 51.3604 89.4668 51.292 89.6719 51.1553C89.8802 51.0153 89.9844 50.8298 89.9844 50.5986ZM95.3262 51.4775C94.9746 51.891 94.4587 52.0977 93.7783 52.0977C93.2152 52.0977 92.7855 51.9349 92.4893 51.6094C92.1963 51.2806 92.0482 50.7956 92.0449 50.1543V46.7168H92.9482V50.1299C92.9482 50.9307 93.2738 51.3311 93.9248 51.3311C94.6149 51.3311 95.0739 51.0739 95.3018 50.5596V46.7168H96.2051V52H95.3457L95.3262 51.4775ZM98.4316 46.7168L98.4561 47.3027C98.8434 46.847 99.3659 46.6191 100.023 46.6191C100.762 46.6191 101.265 46.9023 101.532 47.4688C101.708 47.2148 101.936 47.0098 102.216 46.8535C102.499 46.6973 102.833 46.6191 103.217 46.6191C104.376 46.6191 104.965 47.2327 104.984 48.46V52H104.081V48.5137C104.081 48.1361 103.995 47.8545 103.822 47.6689C103.65 47.4801 103.36 47.3857 102.953 47.3857C102.618 47.3857 102.34 47.4867 102.118 47.6885C101.897 47.887 101.768 48.1556 101.732 48.4941V52H100.824V48.5381C100.824 47.7699 100.448 47.3857 99.6963 47.3857C99.1038 47.3857 98.6986 47.638 98.4805 48.1426V52H97.5771V46.7168H98.4316ZM107.436 51.2334H110.805V52H106.493V44.8906H107.436V51.2334ZM111.493 49.3096C111.493 48.792 111.594 48.3265 111.796 47.9131C112.001 47.4997 112.284 47.1807 112.646 46.9561C113.01 46.7314 113.425 46.6191 113.891 46.6191C114.61 46.6191 115.191 46.8682 115.634 47.3662C116.08 47.8643 116.303 48.5267 116.303 49.3535V49.417C116.303 49.9313 116.203 50.3936 116.005 50.8037C115.81 51.2106 115.528 51.528 115.16 51.7559C114.796 51.9837 114.376 52.0977 113.9 52.0977C113.184 52.0977 112.603 51.8486 112.157 51.3506C111.715 50.8525 111.493 50.1934 111.493 49.373V49.3096ZM112.401 49.417C112.401 50.0029 112.536 50.4733 112.807 50.8281C113.08 51.1829 113.445 51.3604 113.9 51.3604C114.359 51.3604 114.724 51.1813 114.994 50.8232C115.264 50.4619 115.399 49.9574 115.399 49.3096C115.399 48.7301 115.261 48.2614 114.984 47.9033C114.711 47.542 114.346 47.3613 113.891 47.3613C113.445 47.3613 113.085 47.5387 112.812 47.8936C112.538 48.2484 112.401 48.7562 112.401 49.417ZM119.989 47.5273C119.853 47.5046 119.704 47.4932 119.545 47.4932C118.952 47.4932 118.55 47.7454 118.339 48.25V52H117.436V46.7168H118.314L118.329 47.3271C118.625 46.8551 119.045 46.6191 119.589 46.6191C119.765 46.6191 119.898 46.6419 119.989 46.6875V47.5273ZM122.919 52.0977C122.203 52.0977 121.62 51.8633 121.171 51.3945C120.722 50.9225 120.497 50.2926 120.497 49.5049V49.3389C120.497 48.8148 120.596 48.3477 120.795 47.9375C120.997 47.5241 121.277 47.2018 121.635 46.9707C121.996 46.7363 122.387 46.6191 122.807 46.6191C123.493 46.6191 124.027 46.8454 124.408 47.2979C124.789 47.7503 124.979 48.3981 124.979 49.2412V49.6172H121.4C121.413 50.138 121.565 50.5596 121.854 50.8818C122.147 51.2008 122.519 51.3604 122.968 51.3604C123.287 51.3604 123.557 51.2952 123.778 51.165C124 51.0348 124.193 50.8623 124.359 50.6475L124.911 51.0771C124.468 51.7575 123.804 52.0977 122.919 52.0977ZM122.807 47.3613C122.442 47.3613 122.136 47.4948 121.889 47.7617C121.641 48.0254 121.488 48.3965 121.43 48.875H124.076V48.8066C124.05 48.3477 123.926 47.9928 123.705 47.7422C123.484 47.4883 123.184 47.3613 122.807 47.3613ZM126.879 46.7168L126.903 47.3027C127.291 46.847 127.813 46.6191 128.471 46.6191C129.21 46.6191 129.713 46.9023 129.979 47.4688C130.155 47.2148 130.383 47.0098 130.663 46.8535C130.946 46.6973 131.28 46.6191 131.664 46.6191C132.823 46.6191 133.412 47.2327 133.432 48.46V52H132.528V48.5137C132.528 48.1361 132.442 47.8545 132.27 47.6689C132.097 47.4801 131.807 47.3857 131.4 47.3857C131.065 47.3857 130.787 47.4867 130.565 47.6885C130.344 47.887 130.215 48.1556 130.18 48.4941V52H129.271V48.5381C129.271 47.7699 128.896 47.3857 128.144 47.3857C127.551 47.3857 127.146 47.638 126.928 48.1426V52H126.024V46.7168H126.879ZM93.9395 64H93.002V56.8906H93.9395V64ZM99.9795 61.417C99.9795 62.221 99.7956 62.8688 99.4277 63.3604C99.0599 63.8519 98.5618 64.0977 97.9336 64.0977C97.2923 64.0977 96.7878 63.8942 96.4199 63.4873V66.0312H95.5166V58.7168H96.3418L96.3857 59.3027C96.7536 58.847 97.2646 58.6191 97.9189 58.6191C98.5537 58.6191 99.055 58.8584 99.4229 59.3369C99.7939 59.8154 99.9795 60.4811 99.9795 61.334V61.417ZM99.0762 61.3145C99.0762 60.7188 98.9492 60.2484 98.6953 59.9033C98.4414 59.5583 98.0931 59.3857 97.6504 59.3857C97.1035 59.3857 96.6934 59.6283 96.4199 60.1133V62.6377C96.6901 63.1195 97.1035 63.3604 97.6602 63.3604C98.0931 63.3604 98.4365 63.1895 98.6904 62.8477C98.9476 62.5026 99.0762 61.9915 99.0762 61.3145ZM104.208 62.5986C104.208 62.3545 104.115 62.1657 103.93 62.0322C103.747 61.8955 103.427 61.7783 102.968 61.6807C102.512 61.583 102.149 61.4658 101.879 61.3291C101.612 61.1924 101.413 61.0296 101.283 60.8408C101.156 60.652 101.093 60.4274 101.093 60.167C101.093 59.734 101.275 59.3678 101.64 59.0684C102.007 58.7689 102.476 58.6191 103.046 58.6191C103.645 58.6191 104.13 58.7738 104.501 59.083C104.875 59.3923 105.062 59.7878 105.062 60.2695H104.154C104.154 60.0221 104.049 59.8089 103.837 59.6299C103.629 59.4508 103.365 59.3613 103.046 59.3613C102.717 59.3613 102.46 59.4329 102.274 59.5762C102.089 59.7194 101.996 59.9066 101.996 60.1377C101.996 60.3558 102.082 60.5202 102.255 60.6309C102.427 60.7415 102.738 60.8473 103.188 60.9482C103.64 61.0492 104.006 61.1696 104.286 61.3096C104.566 61.4495 104.773 61.6188 104.906 61.8174C105.043 62.0127 105.111 62.252 105.111 62.5352C105.111 63.0072 104.923 63.3864 104.545 63.6729C104.167 63.9561 103.677 64.0977 103.075 64.0977C102.652 64.0977 102.278 64.0228 101.952 63.873C101.627 63.7233 101.371 63.515 101.186 63.248C101.003 62.9779 100.912 62.6865 100.912 62.374H101.815C101.832 62.6768 101.952 62.9176 102.177 63.0967C102.405 63.2725 102.704 63.3604 103.075 63.3604C103.417 63.3604 103.69 63.292 103.896 63.1553C104.104 63.0153 104.208 62.8298 104.208 62.5986ZM109.55 63.4775C109.198 63.891 108.682 64.0977 108.002 64.0977C107.439 64.0977 107.009 63.9349 106.713 63.6094C106.42 63.2806 106.272 62.7956 106.269 62.1543V58.7168H107.172V62.1299C107.172 62.9307 107.497 63.3311 108.148 63.3311C108.839 63.3311 109.298 63.0739 109.525 62.5596V58.7168H110.429V64H109.569L109.55 63.4775ZM112.655 58.7168L112.68 59.3027C113.067 58.847 113.59 58.6191 114.247 58.6191C114.986 58.6191 115.489 58.9023 115.756 59.4688C115.932 59.2148 116.16 59.0098 116.439 58.8535C116.723 58.6973 117.056 58.6191 117.44 58.6191C118.599 58.6191 119.188 59.2327 119.208 60.46V64H118.305V60.5137C118.305 60.1361 118.218 59.8545 118.046 59.6689C117.873 59.4801 117.584 59.3857 117.177 59.3857C116.841 59.3857 116.563 59.4867 116.342 59.6885C116.12 59.887 115.992 60.1556 115.956 60.4941V64H115.048V60.5381C115.048 59.7699 114.672 59.3857 113.92 59.3857C113.327 59.3857 112.922 59.638 112.704 60.1426V64H111.801V58.7168H112.655Z" fill="white"/>
    
    </g>
    <defs>
    <clipPath id="clip0">
    <rect width="300" height="300" fill="white"/>
    </clipPath>
    </defs>
    </svg>

https://jsfiddle.net/bencepiatrik/fnd52Lzo/1/

大佬总结

以上是大佬教程为你收集整理的我需要在 SVG 象限内添加文本全部内容,希望文章能够帮你解决我需要在 SVG 象限内添加文本所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:我需要在