SVG在笔记本端正常显示，移动端/平板端不显示问题求助

你的SVG无法在小屏幕设备正常显示，核心问题之一是命名空间URL不完整，移动端浏览器对XML规范的兼容性要求更严格，另外还需要检查容器的CSS适配。以下是具体修复步骤：

1. 修复SVG命名空间URL #

你当前的xmlns:svg和xmlns:xlink属性值缺少http://前缀，这会导致移动端浏览器无法正确识别SVG规范。修正后的SVG标签：

<svg width="92" height="92" viewBox="0 0 92 92" fill="none" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">

• 注意：xmlns（默认命名空间）比xmlns:svg更标准，直接使用xmlns="http://www.w3.org/2000/svg"即可，无需额外的xmlns:svg。

2. 确保容器CSS适配小屏幕 #

检查.ticket-status-pic的CSS样式，避免在小屏幕上出现隐藏、溢出或尺寸为0的情况：

.ticket-status-pic {
  display: block; /* 避免inline元素的间隙问题 */
  max-width: 100%; /* 适配小屏幕宽度 */
  height: auto; /* 保持宽高比 */
  visibility: visible; /* 确保未被隐藏 */
}

3. 修正后的完整SVG代码 #

<div class="ticket-status-pic">
<svg width="92" height="92" viewBox="0 0 92 92" fill="none" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
    <circle cx="46" cy="46" r="45.5" fill="#BDFFBD" stroke="#03B403"/>
        <g clip-path="url(#clip0)">
             <path d="M67.4792 65.5837H25.5208C22.4777 65.5837 20 63.1059 20 60.0628V55.6462C20 55.0367 20.4947 54.542 21.1042 54.542H22.2083C24.6441 54.542 26.625 52.5611 26.625 50.1253C26.625 47.6895 24.6441 45.7087 22.2083 45.7087H21.1042C20.4947 45.7087 20 45.214 20 44.6045V40.1878C20 37.1447 22.4777 34.667 25.5208 34.667H67.4792C70.5222 34.667 73 37.1447 73 40.1878V44.6045C73 45.214 72.5053 45.7087 71.8958 45.7087H70.7917C68.3559 45.7087 66.375 47.6895 66.375 50.1253C66.375 51.3046 66.8343 52.4132 67.6691 53.2479C68.5016 54.0827 69.6102 54.542 70.7895 54.542H71.8936C72.5031 54.542 72.9978 55.0367 72.9978 55.6462V60.0628C73 63.1059 70.5222 65.5837 67.4792 65.5837ZM22.2083 56.7503V60.0628C22.2083 61.8891 23.6945 63.3753 25.5208 63.3753H67.4792C69.3055 63.3753 70.7917 61.8891 70.7917 60.0628V56.7503H70.7895C69.0206 56.7503 67.3577 56.0613 66.1078 54.8114C64.8557 53.5593 64.1667 51.8942 64.1667 50.1253C64.1667 46.4727 67.1391 43.5003 70.7917 43.5003V40.1878C70.7917 38.3615 69.3055 36.8753 67.4792 36.8753H25.5208C23.6945 36.8753 22.2083 38.3615 22.2083 40.1878V43.5003C25.8609 43.5003 28.8333 46.4727 28.8333 50.1253C28.8333 53.7779 25.8609 56.7503 22.2083 56.7503V56.7503Z" fill="#03B403"/>
                    <path d="M35.526 57.768C34.9165 57.768 34.4219 57.2733 34.4219 56.6638V52.9296C34.4219 52.3201 34.9165 51.8254 35.526 51.8254C36.1355 51.8254 36.6302 52.3178 36.6302 52.9296V56.6661C36.6302 57.2756 36.1355 57.768 35.526 57.768ZM35.526 48.4268C34.9165 48.4268 34.4219 47.9321 34.4219 47.3226V43.5861C34.4219 42.9766 34.9165 42.4819 35.526 42.4819C36.1355 42.4819 36.6302 42.9766 36.6302 43.5861V47.3226C36.6302 47.9321 36.1355 48.4268 35.526 48.4268Z" fill="#03B403"/>
                    <path d="M25.5221 36.875C25.0738 36.875 24.652 36.6012 24.4886 36.1573C24.2744 35.5853 24.5637 34.9493 25.1356 34.7373L60.2481 21.6265C61.9552 20.986 63.9604 21.9445 64.5434 23.6648L68.525 35.4153C68.7193 35.9939 68.4101 36.6188 67.8338 36.8154C67.2618 37.0119 66.6302 36.7005 66.4337 36.1242L62.4521 24.3736C62.2577 23.7995 61.5908 23.4859 61.0188 23.6935L25.9064 36.8043C25.7805 36.8529 25.6502 36.875 25.5221 36.875V36.875Z" fill="#03B403"/>
                    <g clip-path="url(#clip1)">
                    <path d="M57.8569 49.449C57.8569 51.7439 56.9452 53.9448 55.3225 55.5676C53.6997 57.1904 51.4988 58.102 49.2038 58.102C46.9089 58.102 44.708 57.1904 43.0852 55.5676C41.4624 53.9448 40.5508 51.7439 40.5508 49.449C40.5508 47.154 41.4624 44.9531 43.0852 43.3303C44.708 41.7076 46.9089 40.7959 49.2038 40.7959C51.4988 40.7959 53.6997 41.7076 55.3225 43.3303C56.9452 44.9531 57.8569 47.154 57.8569 49.449V49.449ZM53.5628 46.1716C53.4856 46.0946 53.3936 46.034 53.2923 45.9934C53.1911 45.9528 53.0827 45.933 52.9737 45.9352C52.8646 45.9374 52.7571 45.9616 52.6577 46.0063C52.5582 46.051 52.4687 46.1153 52.3947 46.1954L48.6381 50.9816L46.3743 48.7167C46.2205 48.5734 46.0171 48.4954 45.807 48.4991C45.5968 48.5028 45.3963 48.5879 45.2476 48.7366C45.099 48.8852 45.0139 49.0857 45.0102 49.2959C45.0065 49.506 45.0845 49.7094 45.2278 49.8632L48.0898 52.7263C48.1669 52.8033 48.2587 52.8639 48.3597 52.9046C48.4608 52.9453 48.569 52.9653 48.6779 52.9632C48.7868 52.9612 48.8942 52.9373 48.9937 52.8929C49.0931 52.8484 49.1826 52.7844 49.2568 52.7047L53.5747 47.3073C53.7219 47.1543 53.8032 46.9496 53.8012 46.7373C53.7992 46.5249 53.714 46.3218 53.5639 46.1716H53.5628Z" fill="#03B403"/>
                    </g>
                    </g>
                    <defs>
                    <clipPath id="clip0">
                    <rect width="53" height="53" fill="white" transform="translate(20 17)"/>
                    </clipPath>
                    <clipPath id="clip1">
                    <rect width="17.3061" height="17.3061" fill="white" transform="translate(40.5508 40.7959)"/>
                    </clipPath>
                    </defs>
                  </svg>
                </div>

4. 额外排查步骤 #

• 单独测试SVG：将SVG代码保存为.svg文件，直接在移动端浏览器打开，确认SVG本身是否正常。
• 检查页面其他CSS：避免全局样式（如img { max-width: 100%; }）影响SVG的显示，可给SVG添加专属类样式隔离。
• 清除移动端缓存：部分移动端浏览器会缓存旧资源，测试前先清除浏览器缓存。

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