HTML新手求助：<Rect>元素宽度超500后被截断如何解决？

问题出在SVG默认有固定的默认尺寸（通常是300px宽、150px高），当你的<rect>宽度超过这个默认范围时，超出部分会被自动截断。以下是两种解决办法：

方案一：调整SVG的视口属性 #

给SVG添加width、height和viewBox属性，让SVG的可显示区域足够容纳你的矩形：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"> <!-- 注意这里你拼写错了charmset，应该是charset -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Wirtualna wizytówka">
        <meta name="keywords" content="radca prawny, prawo, radca, prawoznawca, pomoc prawna, prawnik">
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>Prawny</title>
    </head>
    <body style="background-color: #ffffff;">
        <!-- 设置width为100%让SVG自适应父容器，viewBox定义内部坐标范围 -->
        <svg width="100%" height="60" viewBox="0 0 1070 60">
             <rect x="70" y="50" rx="5" ry="5" width="1000" height="10" fill="black" />
          </svg>          
    </body>
</html>

• width="100%"：让SVG自适应页面宽度（也可以设固定值比如1070px）
• viewBox="0 0 1070 60"：定义SVG内部的坐标系统，这里的宽度1070是rect的x值(70) + rect的width(1000)，高度60确保rect的y和height不会超出

方案二：用CSS直接绘制线条（更简单） #

如果只是需要一条圆角线条，完全可以不用SVG，用普通div配合CSS实现，更直观且不会有截断问题：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Wirtualna wizytówka">
        <meta name="keywords" content="radca prawny, prawo, radca, prawoznawca, pomoc prawna, prawnik">
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>Prawny</title>
    </head>
    <body style="background-color: #ffffff; margin: 0;">
        <!-- 用div实现圆角线条 -->
        <div style="margin-left: 70px; margin-top: 50px; width: 1000px; height: 10px; background: black; border-radius: 5px;"></div>
    </body>
</html>

内容的提问来源于stack exchange，提问作者Sakirarose