程序问答   发布时间:2022-06-02  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何将居中的文本与 SVG 元素对齐?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决如何将居中的文本与 SVG 元素对齐??

开发过程中遇到如何将居中的文本与 SVG 元素对齐?的问题如何解决?下面主要结合日常开发的经验,给出你关于如何将居中的文本与 SVG 元素对齐?的解决方法建议,希望对你解决如何将居中的文本与 SVG 元素对齐?有所启发或帮助;

你好,任何有能力提供帮助的人,我遇到了一些麻烦,让我与 VS Code 进行了一场激烈的竞争,哈哈。

我在 Adob​​e XD 中设计了一个网站 UI。为了给我的设计提供一些功能,我将一些元素导出为 SVG 格式并转移到 HTML 和 CSS。我有一些带有文本标签的 SVG 元素,在设计时我使用 Adob​​e XD 在形状的水平轴上居中对齐文本。但是,现在我已将它们添加到我的 HTML 代码中,当在浏览器中查看时,所有文本都被推到了我的形状的左侧。它是针对几个不同的元素完成的,但这里是其中一个的示例:

@H_262_6@<svg xmlns="http://www.w3.org/2000/svg" wIDth="172" height="239" vIEwBox="0 0 172 239"> <g ID="Boiler-fit-tag" transform="translate(-1499 -296)"> <g ID="Group_1" data-name="Group 1" transform="translate(1499 296)"> <g ID="Rectangle_28" data-name="Rectangle 28" fill="#fff" stroke="#090808" stroke-wIDth="3"> <rect wIDth="172" height="239" rx="27" stroke="none"/> <rect x="1.5" y="1.5" wIDth="169" height="236" rx="25.5" fill="none"/> </g> <line ID="line_1" data-name="line 1" x2="143.142" transform="translate(14.579 143.583)" fill="none" stroke="#707070" stroke-wIDth="2"/> </g> <!--This line below is meant to be in the centre of the Box but is running off the page to the left--> <text ID="Boiler_FitTing" data-name="Boiler FitTing" transform="translate(1530 460)" fill="#e13413" Font-size="20" Font-family="FranklinGothic-Demi,Franklin Gothic" Font-weight="300" letter-spacing="0.039em"><tspan x="-35.055" y="18">BOILER </tspan><tspan x="-36.344" y="40">FITTinG</tspan></text> <g ID="_002-boiler" data-name="002-boiler" transform="translate(1459.535 318.7)"> <path ID="Path_66" data-name="Path 66" d="M220.2,85.447A10.853,10.853,1,209.344,96.3,10.864,220.2,85.447Zm-18.868,0a8.015,8.015,8.014A8.024,8.024,201.329,85.447Z" transform="translate(-83.879 -60.484)"/> <path ID="Path_67" data-name="Path 67" d="M253.158,112.1a1.42,1.42,0-2.006-2.006l-2.844,2.844c-1.27,1.27.707,3.306,2.006,2.006Z" transform="translate(-123.941 -88.929)"/> <path ID="Path_68" data-name="Path 68" d="M155.886,9.51a6.47,6.47,0-4.62-6.18A93.317,93.317,125.464,0c-3.023,0-6.055.129-9.012.383a1.42,.243,2.827c2.876-.247,5.827-.372,8.769-.372a90.41,90.41,25,3.215,3.617,2.58,3.457V56.867H97.88V9.551a3.619,3.619,2.609-3.466c2.139-.613,4.457-1.155,6.889-1.613a1.42,0-.525-2.788c-2.518.473-4.922,1.037-7.145,1.674a6.469,6.469,0-4.665,6.194V71.545a6.47,4.62,6.18c1.072.314,2.448.682,4.107,1.056v3.458a4.582,4.582,3.288,4.414,52.87,6.367,1.451v7.328a1.42,2.837,0V88.517q1.273.158,2.677.28v6.636a1.42,0V88.984c1.175.055,2.4.087,3.687.087q1.858,3.687-.09v6.451a1.42,0V88.786q1.35-.119,2.677-.288v6.935a1.42,0V88.074q1.036-.178,2.055-.385a1.42,0-.57-2.779,65.153,1-31.115-.975,1.761,1-1.265-1.7V79.367a101.981,101.981,18.857,1.687,101.214,18.857-1.735v2.893a1.42,0V78.73c1.624-.366,2.988-.725,4.062-1.032a6.469,4.665-6.194V9.51Zm-5.447,65.459a92.431,92.431,1-24.975,3.248,1-25-3.215,1-2.58-3.457V59.7h55.168V71.5A3.619,150.439,74.969Z"/> <path ID="Path_69" data-name="Path 69" d="M197.862,351.74a1.42,2.837A1.42,197.862,351.74Z" transform="translate(-82.259 -285.204)"/> <path ID="Path_70" data-name="Path 70" d="M249.989,249.989,351.74Z" transform="translate(-124.525 -285.204)"/> <path ID="Path_71" data-name="Path 71" d="M302.117,302.117,351.74Z" transform="translate(-166.792 -285.204)"/> </g> </g> </svg>

我在网上查看并尝试使用 text-anchordominant-baseline 标签,但没有任何影响。我什至尝试更改文本字段的 xy 值,但是对于我的一些使用 <tspan> 的文本跨越两行的 SVG,无法正确对齐它们>

解决方法

  • 使用text-anchor='middle'
  • <text> x 位置精确设置为 SVG 的中心(如果宽度为 172,则设置 x="86")。
  • 使用转换将 <text> 移出 <g> 元素。
  • 将其设为 <svg> 的最后一个子项,以确保它不会被其他人隐藏。
  • 同时设置 <tspan> x="0"

<svg xmlns="http://www.w3.org/2000/svg" width="172" height="239" viewBox="0 0 172 239">
  <g id="Boiler-fit-tag" transform="translate(-1499 -296)">
    <g id="Group_1" data-name="Group 1" transform="translate(1499 296)">
      <g id="Rectangle_28" data-name="Rectangle 28" fill="#fff" stroke="#090808" stroke-width="3">
        <rect width="172" height="239" rx="27" stroke="none"/>
        <rect x="1.5" y="1.5" width="169" height="236" rx="25.5" fill="none"/>
      </g>
      <line id="Line_1" data-name="Line 1" x2="143.142" transform="translate(14.579 143.583)" fill="none" stroke="#707070" stroke-width="2"/>
    </g>
    <!--This line below is meant to be in the centre of the box but is running off the page to the left-->
    <g id="_002-boiler" data-name="002-boiler" transform="translate(1459.535 318.7)">
      <path id="Path_66" data-name="Path 66" d="M220.2,85.447A10.853,10.853,1,209.344,96.3,10.864,220.2,85.447Zm-18.868,0a8.015,8.015,8.014A8.024,8.024,201.329,85.447Z" transform="translate(-83.879 -60.484)"/>
      <path id="Path_67" data-name="Path 67" d="M253.158,112.1a1.42,1.42,0-2.006-2.006l-2.844,2.844c-1.27,1.27.707,3.306,2.006,2.006Z" transform="translate(-123.941 -88.929)"/>
      <path id="Path_68" data-name="Path 68" d="M155.886,9.51a6.47,6.47,0-4.62-6.18A93.317,93.317,125.464,0c-3.023,0-6.055.129-9.012.383a1.42,.243,2.827c2.876-.247,5.827-.372,8.769-.372a90.41,90.41,25,3.215,3.617,2.58,3.457V56.867H97.88V9.551a3.619,3.619,2.609-3.466c2.139-.613,4.457-1.155,6.889-1.613a1.42,0-.525-2.788c-2.518.473-4.922,1.037-7.145,1.674a6.469,6.469,0-4.665,6.194V71.545a6.47,4.62,6.18c1.072.314,2.448.682,4.107,1.056v3.458a4.582,4.582,3.288,4.414,52.87,6.367,1.451v7.328a1.42,2.837,0V88.517q1.273.158,2.677.28v6.636a1.42,0V88.984c1.175.055,2.4.087,3.687.087q1.858,3.687-.09v6.451a1.42,0V88.786q1.35-.119,2.677-.288v6.935a1.42,0V88.074q1.036-.178,2.055-.385a1.42,0-.57-2.779,65.153,1-31.115-.975,1.761,1-1.265-1.7V79.367a101.981,101.981,18.857,1.687,101.214,18.857-1.735v2.893a1.42,0V78.73c1.624-.366,2.988-.725,4.062-1.032a6.469,4.665-6.194V9.51Zm-5.447,65.459a92.431,92.431,1-24.975,3.248,1-25-3.215,1-2.58-3.457V59.7h55.168V71.5A3.619,150.439,74.969Z"/>
      <path id="Path_69" data-name="Path 69" d="M197.862,351.74a1.42,2.837A1.42,197.862,351.74Z" transform="translate(-82.259 -285.204)"/>
      <path id="Path_70" data-name="Path 70" d="M249.989,249.989,351.74Z" transform="translate(-124.525 -285.204)"/>
      <path id="Path_71" data-name="Path 71" d="M302.117,302.117,351.74Z" transform="translate(-166.792 -285.204)"/>
    </g>
  </g>
    <text id="Boiler_FitTing" text-anchor="middle" data-name="Boiler FitTing" transform="translate(86,160)" fill="#e13413" font-size="20" font-family="FranklinGothic-Demi,Franklin Gothic" font-weight="300" letter-spacing="0.039em"><tspan y="18" x="0">BOILER</tspan><tspan y="40" x="0">FITTinG</tspan></text>
</svg>

大佬总结

以上是大佬教程为你收集整理的如何将居中的文本与 SVG 元素对齐?全部内容,希望文章能够帮你解决如何将居中的文本与 SVG 元素对齐?所遇到的程序开发问题。

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

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