如何將中心的文本與 SVG 元素對齊？

Question

你好，任何有能力提供幫助的人，我遇到了一些麻煩，讓我與 VS Code 進行了一段時間的凝視競爭，哈哈。

我在 Adobe XD 中設計了一個網站 UI。 為了給我的設計一些功能，我將一些元素導出為 SVG 格式並移至 HTML 和 CSS。 我有一些 SVG 元素，其中包含文本標簽，在設計時我使用 Adobe XD 將文本居中對齊在形狀的水平軸上。 但是，現在我已將它們添加到我的 HTML 代碼中，當它在瀏覽器中查看時，所有文本都被推到了我的形狀的左側。 它針對幾個不同的元素完成了此操作，但這里是其中之一的示例：

<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,0,1,0,209.344,96.3,10.864,10.864,0,0,0,220.2,85.447Zm-18.868,0a8.015,8.015,0,1,1,8.015,8.014A8.024,8.024,0,0,1,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,0,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,0,0-4.62-6.18A93.317,93.317,0,0,0,125.464,0c-3.023,0-6.055.129-9.012.383a1.42,1.42,0,0,0,.243,2.827c2.876-.247,5.827-.372,8.769-.372a90.41,90.41,0,0,1,25,3.215,3.617,3.617,0,0,1,2.58,3.457V56.867H97.88V9.551a3.619,3.619,0,0,1,2.609-3.466c2.139-.613,4.457-1.155,6.889-1.613a1.42,1.42,0,0,0-.525-2.788c-2.518.473-4.922,1.037-7.145,1.674a6.469,6.469,0,0,0-4.665,6.194V71.545a6.47,6.47,0,0,0,4.62,6.18c1.072.314,2.448.682,4.107,1.056v3.458a4.582,4.582,0,0,0,3.288,4.414,52.87,52.87,0,0,0,6.367,1.451v7.328a1.42,1.42,0,0,0,2.837,0V88.517q1.273.158,2.677.28v6.636a1.42,1.42,0,0,0,2.837,0V88.984c1.175.055,2.4.087,3.687.087q1.858,0,3.687-.09v6.451a1.42,1.42,0,0,0,2.837,0V88.786q1.35-.119,2.677-.288v6.935a1.42,1.42,0,0,0,2.837,0V88.074q1.036-.178,2.055-.385a1.42,1.42,0,0,0-.57-2.779,65.153,65.153,0,0,1-31.115-.975,1.761,1.761,0,0,1-1.265-1.7V79.367a101.981,101.981,0,0,0,18.857,1.687,101.214,101.214,0,0,0,18.857-1.735v2.893a1.42,1.42,0,0,0,2.837,0V78.73c1.624-.366,2.988-.725,4.062-1.032a6.469,6.469,0,0,0,4.665-6.194V9.51Zm-5.447,65.459a92.431,92.431,0,0,1-24.975,3.248,90.41,90.41,0,0,1-25-3.215,3.617,3.617,0,0,1-2.58-3.457V59.7h55.168V71.5A3.619,3.619,0,0,1,150.439,74.969Z"/>
      <path id="Path_69" data-name="Path 69" d="M197.862,351.74a1.42,1.42,0,0,0,0,2.837A1.42,1.42,0,0,0,197.862,351.74Z" transform="translate(-82.259 -285.204)"/>
      <path id="Path_70" data-name="Path 70" d="M249.989,351.74a1.42,1.42,0,0,0,0,2.837A1.42,1.42,0,0,0,249.989,351.74Z" transform="translate(-124.525 -285.204)"/>
      <path id="Path_71" data-name="Path 71" d="M302.117,351.74a1.42,1.42,0,0,0,0,2.837A1.42,1.42,0,0,0,302.117,351.74Z" transform="translate(-166.792 -285.204)"/>
    </g>
  </g>
</svg>

我在網上查看並嘗試使用text-anchor和dominant-baseline標簽，但它沒有影響任何東西。 我什至嘗試更改文本字段的x和y值，但是對於我的一些 SVG，使用<tspan>的文本跨越兩行，無法正確對齊它們

Answer 1

• 使用text-anchor='middle' 。
• 將<text> x position 精確設置到 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,0,1,0.209,344.96,3.10,864.10,864,0,0,0.220,2.85.447Zm-18,868.0a8,015.8,015,0,1,1.8,015.8.014A8,024.8,024,0,0,1.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,0.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,0.0-4.62-6.18A93,317.93,317,0,0,0.125,464.0c-3,023.0-6.055.129-9.012.383a1,42.1,42,0,0,0.,243.2.827c2.876-,247.5.827-,372.8.769-.372a90,41.90,41,0,0,1,25.3,215.3,617.3,617,0,0,1.2,58.3.457V56.867H97.88V9.551a3,619.3,619,0,0,1.2.609-3.466c2.139-,613.4.457-1,155.6.889-1.613a1,42.1,42,0,0.0-.525-2.788c-2.518.473-4,922.1.037-7,145.1.674a6,469.6,469,0,0.0-4,665.6.194V71.545a6,47.6,47,0,0,0.4,62.6.18c1.072,314.2.448,682.4,107.1.056v3.458a4,582.4,582,0,0,0.3,288.4,414.52,87.52,87,0,0,0.6,367.1.451v7.328a1,42.1,42,0,0,0.2,837.0V88.517q1.273,158.2.677.28v6.636a1,42.1,42,0,0,0.2,837.0V88.984c1.175,055.2.4,087.3.687.087q1,858,0.3.687-.09v6.451a1,42.1,42,0,0,0.2,837.0V88.786q1.35-,119.2.677-.288v6.935a1,42.1,42,0,0,0.2,837.0V88.074q1.036-,178.2.055-.385a1,42.1,42,0,0.0-.57-2,779.65,153.65,153,0,0.1-31.115-,975.1,761.1,761,0,0.1-1.265-1.7V79.367a101,981.101,981,0,0,0.18,857.1,687.101,214.101,214,0,0,0.18.857-1.735v2.893a1,42.1,42,0,0,0.2,837.0V78.73c1.624-,366.2.988-,725.4.062-1.032a6,469.6,469,0,0,0.4.665-6.194V9.51Zm-5,447.65.459a92,431.92,431,0,0.1-24,975.3,248.90,41.90,41,0,0.1-25-3,215.3,617.3,617,0,0.1-2.58-3.457V59.7h55.168V71.5A3,619.3,619,0,0,1.150,439.74.969Z"/> <path id="Path_69" data-name="Path 69" d="M197,862.351.74a1,42.1,42,0,0,0,0.2.837A1,42.1,42,0,0,0.197,862.351.74Z" transform="translate(-82.259 -285.204)"/> <path id="Path_70" data-name="Path 70" d="M249,989.351.74a1,42.1,42,0,0,0,0.2.837A1,42.1,42,0,0,0.249,989.351.74Z" transform="translate(-124.525 -285.204)"/> <path id="Path_71" data-name="Path 71" d="M302,117.351.74a1,42.1,42,0,0,0,0.2.837A1,42.1,42,0,0,0.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>