html - 如何在 SVG 响应式上放置文本？

Question

我正在为学校做自己的网站，我想使用 SVG 绘制月亮(用 js 制作动画)在这个月亮上有一个“激光”，我想要一些文字在激光上方(所以不要在月球但在激光上方，我的代码笔会更好地向您展示我想要的东西)。我不想使用绝对位置，因为它没有响应，也不是专业功能，我想训练做一些专业网站并养成一些好习惯。

我已经尝试过使用 CSS GRID，但我真的不知道它是如何工作的，我需要更多示例才能真正理解如何在这种情况下使用它

因为SVG，代码太长了，看codepen

(代码太长因为是SVG)

<svg width="1113" height="634" viewBox="0 0 1113 634" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M53.0781 168.156H31.1406V229H22.1875V168.156H0.296875V160.75H53.0781V168.156ZM78.2031 229.938C71.3281 229.938 65.7344 227.688 61.4219 223.188C57.1094 218.656 54.9531 212.609 54.9531 205.047V203.453C54.9531 198.422 55.9062 193.938 57.8125 190C59.75 186.031 62.4375 182.938 65.875 180.719C69.3438 178.469 73.0938 177.344 77.125 177.344C83.7188 177.344 88.8438 179.516 92.5 183.859C96.1562 188.203 97.9844 194.422 97.9844 202.516V206.125H63.625C63.75 211.125 65.2031 215.172 67.9844 218.266C70.7969 221.328 74.3594 222.859 78.6719 222.859C81.7344 222.859 84.3281 222.234 86.4531 220.984C88.5781 219.734 90.4375 218.078 92.0312 216.016L97.3281 220.141C93.0781 226.672 86.7031 229.938 78.2031 229.938ZM77.125 184.469C73.625 184.469 70.6875 185.75 68.3125 188.312C65.9375 190.844 64.4688 194.406 63.9062 199H89.3125V198.344C89.0625 193.938 87.875 190.531 85.75 188.125C83.625 185.688 80.75 184.469 77.125 184.469ZM105.953 203.219C105.953 195.438 107.797 189.188 111.484 184.469C115.172 179.719 120 177.344 125.969 177.344C131.906 177.344 136.609 179.375 140.078 183.438V157H148.75V229H140.781L140.359 223.562C136.891 227.812 132.062 229.938 125.875 229.938C120 229.938 115.203 227.531 111.484 222.719C107.797 217.906 105.953 211.625 105.953 203.875V203.219ZM114.625 204.203C114.625 209.953 115.812 214.453 118.188 217.703C120.562 220.953 123.844 222.578 128.031 222.578C133.531 222.578 137.547 220.109 140.078 215.172V191.875C137.484 187.094 133.5 184.703 128.125 184.703C123.875 184.703 120.562 186.344 118.188 189.625C115.812 192.906 114.625 197.766 114.625 204.203ZM160.141 203.219C160.141 195.438 161.984 189.188 165.672 184.469C169.359 179.719 174.188 177.344 180.156 177.344C186.094 177.344 190.797 179.375 194.266 183.438V157H202.938V229H194.969L194.547 223.562C191.078 227.812 186.25 229.938 180.062 229.938C174.188 229.938 169.391 227.531 165.672 222.719C161.984 217.906 160.141 211.625 160.141 203.875V203.219ZM168.812 204.203C168.812 209.953 170 214.453 172.375 217.703C174.75 220.953 178.031 222.578 182.219 222.578C187.719 222.578 191.734 220.109 194.266 215.172V191.875C191.672 187.094 187.688 184.703 182.312 184.703C178.062 184.703 174.75 186.344 172.375 189.625C170 192.906 168.812 197.766 168.812 204.203ZM233.031 216.297L244.844 178.281H254.125L233.734 236.828C230.578 245.266 225.562 249.484 218.688 249.484L217.047 249.344L213.812 248.734V241.703L216.156 241.891C219.094 241.891 221.375 241.297 223 240.109C224.656 238.922 226.016 236.75 227.078 233.594L229 228.438L210.906 178.281H220.375L233.031 216.297ZM58.0469 310.078C58.0469 316.672 57 322.359 54.9062 327.141C52.8125 331.891 49.875 335.609 46.0938 338.297L58.2812 347.859L52.1406 353.531L37.75 342.094C35.5 342.656 33.125 342.938 30.625 342.938C25.25 342.938 20.4844 341.625 16.3281 339C12.1719 336.344 8.9375 332.578 6.625 327.703C4.34375 322.797 3.17188 317.125 3.10938 310.688V305.766C3.10938 299.203 4.25 293.406 6.53125 288.375C8.8125 283.344 12.0312 279.5 16.1875 276.844C20.375 274.156 25.1562 272.812 30.5312 272.812C36.0312 272.812 40.8594 274.141 45.0156 276.797C49.2031 279.453 52.4219 283.281 54.6719 288.281C56.9219 293.25 58.0469 299.062 58.0469 305.719V310.078ZM49.0469 305.672C49.0469 297.641 47.4375 291.453 44.2188 287.109C41.0312 282.734 36.4688 280.547 30.5312 280.547C24.875 280.547 20.4062 282.719 17.125 287.062C13.875 291.375 12.2031 297.375 12.1094 305.062V310.078C12.1094 317.891 13.7344 324.047 16.9844 328.547C20.2656 333.047 24.8125 335.297 30.625 335.297C36.4375 335.297 40.9375 333.188 44.125 328.969C47.3125 324.719 48.9531 318.641 49.0469 310.734V305.672ZM101.875 336.984C98.5 340.953 93.5469 342.938 87.0156 342.938C81.6094 342.938 77.4844 341.375 74.6406 338.25C71.8281 335.094 70.4062 330.438 70.375 324.281V291.281H79.0469V324.047C79.0469 331.734 82.1719 335.578 88.4219 335.578C95.0469 335.578 99.4531 333.109 101.641 328.172V291.281H110.312V342H102.062L101.875 336.984ZM132.953 342H124.281V291.281H132.953V342ZM123.578 277.828C123.578 276.422 124 275.234 124.844 274.266C125.719 273.297 127 272.812 128.688 272.812C130.375 272.812 131.656 273.297 132.531 274.266C133.406 275.234 133.844 276.422 133.844 277.828C133.844 279.234 133.406 280.406 132.531 281.344C131.656 282.281 130.375 282.75 128.688 282.75C127 282.75 125.719 282.281 124.844 281.344C124 280.406 123.578 279.234 123.578 277.828ZM155.078 291.281L155.359 297.656C159.234 292.781 164.297 290.344 170.547 290.344C181.266 290.344 186.672 296.391 186.766 308.484V342H178.094V308.438C178.062 304.781 177.219 302.078 175.562 300.328C173.938 298.578 171.391 297.703 167.922 297.703C165.109 297.703 162.641 298.453 160.516 299.953C158.391 301.453 156.734 303.422 155.547 305.859V342H146.875V291.281H155.078ZM211.609 279V291.281H221.078V297.984H211.609V329.438C211.609 331.469 212.031 333 212.875 334.031C213.719 335.031 215.156 335.531 217.188 335.531C218.188 335.531 219.562 335.344 221.312 334.969V342C219.031 342.625 216.812 342.938 214.656 342.938C210.781 342.938 207.859 341.766 205.891 339.422C203.922 337.078 202.938 333.75 202.938 329.438V297.984H193.703V291.281H202.938V279H211.609ZM228.016 316.172C228.016 311.203 228.984 306.734 230.922 302.766C232.891 298.797 235.609 295.734 239.078 293.578C242.578 291.422 246.562 290.344 251.031 290.344C257.938 290.344 263.516 292.734 267.766 297.516C272.047 302.297 274.188 308.656 274.188 316.594V317.203C274.188 322.141 273.234 326.578 271.328 330.516C269.453 334.422 266.75 337.469 263.219 339.656C259.719 341.844 255.688 342.938 251.125 342.938C244.25 342.938 238.672 340.547 234.391 335.766C230.141 330.984 228.016 324.656 228.016 316.781V316.172ZM236.734 317.203C236.734 322.828 238.031 327.344 240.625 330.75C243.25 334.156 246.75 335.859 251.125 335.859C255.531 335.859 259.031 334.141 261.625 330.703C264.219 327.234 265.516 322.391 265.516 316.172C265.516 310.609 264.188 306.109 261.531 302.672C258.906 299.203 255.406 297.469 251.031 297.469C246.75 297.469 243.297 299.172 240.672 302.578C238.047 305.984 236.734 310.859 236.734 317.203Z" fill="white"/>
<ellipse cx="777" cy="327" rx="312" ry="307" fill="#3D3D3D"/>
<ellipse cx="801" cy="307" rx="312" ry="307" fill="#D8D8D8"/>
<ellipse cx="839" cy="188.5" rx="40" ry="40.5" fill="#8A8A8A"/>
<circle cx="980.5" cy="249.5" r="57.5" fill="#8A8A8A"/>
<ellipse cx="913" cy="102.5" rx="24" ry="24.5" fill="#8A8A8A"/>
<ellipse cx="1038.5" cy="408.5" rx="10.5" ry="11.5" fill="#8A8A8A"/>
<ellipse cx="936.5" cy="485" rx="23.5" ry="21" fill="#8A8A8A"/>
<line x1="67.0125" y1="432" x2="467.013" y2="433" stroke="#DA2C6A" stroke-width="10"/>
<line x1="539" y1="352" x2="759" y2="352" stroke="#DA2C6A" stroke-width="10"/>
<line x1="542.491" y1="350.422" x2="463.646" y2="434.43" stroke="#DA2C6A" stroke-width="10"/>
</svg>

这是我想要的:

https://codepen.io/mrkindeur/pen/pozNZJr

感谢您的帮助!

Answer 1

您可以尝试通过添加 transform="translate(50,50)" 来翻译路径

但是，正如我所说，您可以使用 <text>文本元素而不是路径。当然，您可能想使用不同的字体。此外，我还转换了路径中的线条，并删除了 svg 元素的宽度和高度属性以使其响应。

body {
  background:black;
}

<svg viewBox="0 0 1113 634" fill="none" xmlns="http://www.w3.org/2000/svg">
<text fill="white">

   <textPath font-size="70" xlink:href="#thePath">
  <tspan dy="-100">Teddy</tspan>
  <tspan dy="70" dx="-190">Quinto</tspan>
      </textPath>
  </text>

<ellipse cx="777" cy="327" rx="312" ry="307" fill="#3D3D3D"/>
<ellipse cx="801" cy="307" rx="312" ry="307" fill="#D8D8D8"/>
<ellipse cx="839" cy="188.5" rx="40" ry="40.5" fill="#8A8A8A"/>
<circle cx="980.5" cy="249.5" r="57.5" fill="#8A8A8A"/>
<ellipse cx="913" cy="102.5" rx="24" ry="24.5" fill="#8A8A8A"/>
<ellipse cx="1038.5" cy="408.5" rx="10.5" ry="11.5" fill="#8A8A8A"/>
<ellipse cx="936.5" cy="485" rx="23.5" ry="21" fill="#8A8A8A"/>
<path id="thePath" d="M67.0125,432L467.013,433 539,352 759,352 542.491,350.422 463.646,434.43" stroke="#DA2C6A" stroke-width="10"/>
</svg>

希望这是你需要的