css - 如何使svg文本响应

Question

我正在使用 svg 设计我的 html 页面。该网页在桌面显示中非常好。但它没有响应。我还为移动界面设计了另一个 svg，但不知道应该如何添加

<svg  id= "logo" width="793" height="94" viewBox="0 0 793 94" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="0.625" y="0.875" width="792" height="93" fill="black">
<rect fill="white" x="0.625" y="0.875" width="792" height="93"/>
<path d="M71.125 91H59.75L14 21.625V91H2.625V3.75H14L59.75 73V3.75H71.125V91Z"/>
<path d="M101.891 13.125V42.25H133.641V51.625H101.891V81.625H137.391V91H90.5156V3.75H137.391V13.125H101.891Z"/>
<path d="M181.728 3.875C191.228 3.875 199.436 5.66667 206.353 9.25C213.353 12.75 218.686 17.7917 222.353 24.375C226.103 30.9583 227.978 38.7083 227.978 47.625C227.978 56.5417 226.103 64.2917 222.353 70.875C218.686 77.375 213.353 82.375 206.353 85.875C199.436 89.2917 191.228 91 181.728 91H154.603V3.875H181.728ZM181.728 81.625C192.978 81.625 201.561 78.6667 207.478 72.75C213.394 66.75 216.353 58.375 216.353 47.625C216.353 36.7917 213.353 28.3333 207.353 22.25C201.436 16.1667 192.894 13.125 181.728 13.125H165.978V81.625H181.728Z"/>
<path d="M254.356 3.875V91H242.981V3.875H254.356Z"/>
<path d="M325.243 71.625H287.243L280.243 91H268.243L299.743 4.375H312.868L344.243 91H332.243L325.243 71.625ZM321.993 62.375L306.243 18.375L290.493 62.375H321.993Z"/>
<path d="M426.472 91H415.097L369.347 21.625V91H357.972V3.75H369.347L415.097 73V3.75H426.472V91Z"/>
<path d="M522.812 46.125C525.979 46.625 528.854 47.9167 531.438 50C534.104 52.0833 536.187 54.6667 537.688 57.75C539.271 60.8333 540.062 64.125 540.062 67.625C540.062 72.0417 538.938 76.0417 536.688 79.625C534.438 83.125 531.146 85.9167 526.812 88C522.562 90 517.521 91 511.688 91H479.188V3.875H510.438C516.354 3.875 521.396 4.875 525.562 6.875C529.729 8.79167 532.854 11.4167 534.938 14.75C537.021 18.0833 538.062 21.8333 538.062 26C538.062 31.1667 536.646 35.4583 533.812 38.875C531.063 42.2083 527.396 44.625 522.812 46.125ZM490.562 41.5H509.688C515.021 41.5 519.146 40.25 522.062 37.75C524.979 35.25 526.438 31.7917 526.438 27.375C526.438 22.9583 524.979 19.5 522.062 17C519.146 14.5 514.938 13.25 509.438 13.25H490.562V41.5ZM510.688 81.625C516.354 81.625 520.771 80.2917 523.938 77.625C527.104 74.9583 528.688 71.25 528.688 66.5C528.688 61.6667 527.021 57.875 523.688 55.125C520.354 52.2917 515.896 50.875 510.312 50.875H490.562V81.625H510.688Z"/>
<path d="M567.223 81.75H597.723V91H555.848V3.875H567.223V81.75Z"/>
<path d="M649.303 91.875C641.219 91.875 633.844 90 627.178 86.25C620.511 82.4167 615.219 77.125 611.303 70.375C607.469 63.5417 605.553 55.875 605.553 47.375C605.553 38.875 607.469 31.25 611.303 24.5C615.219 17.6667 620.511 12.375 627.178 8.625C633.844 4.79167 641.219 2.875 649.303 2.875C657.469 2.875 664.886 4.79167 671.553 8.625C678.219 12.375 683.469 17.625 687.303 24.375C691.136 31.125 693.053 38.7917 693.053 47.375C693.053 55.9583 691.136 63.625 687.303 70.375C683.469 77.125 678.219 82.4167 671.553 86.25C664.886 90 657.469 91.875 649.303 91.875ZM649.303 82C655.386 82 660.844 80.5833 665.678 77.75C670.594 74.9167 674.428 70.875 677.178 65.625C680.011 60.375 681.428 54.2917 681.428 47.375C681.428 40.375 680.011 34.2917 677.178 29.125C674.428 23.875 670.636 19.8333 665.803 17C660.969 14.1667 655.469 12.75 649.303 12.75C643.136 12.75 637.636 14.1667 632.803 17C627.969 19.8333 624.136 23.875 621.303 29.125C618.553 34.2917 617.178 40.375 617.178 47.375C617.178 54.2917 618.553 60.375 621.303 65.625C624.136 70.875 627.969 74.9167 632.803 77.75C637.719 80.5833 643.219 82 649.303 82Z"/>
<path d="M774.069 29.125C771.653 24.0417 768.153 20.125 763.569 17.375C758.986 14.5417 753.653 13.125 747.569 13.125C741.486 13.125 735.986 14.5417 731.069 17.375C726.236 20.125 722.403 24.125 719.569 29.375C716.819 34.5417 715.444 40.5417 715.444 47.375C715.444 54.2083 716.819 60.2083 719.569 65.375C722.403 70.5417 726.236 74.5417 731.069 77.375C735.986 80.125 741.486 81.5 747.569 81.5C756.069 81.5 763.069 78.9583 768.569 73.875C774.069 68.7917 777.278 61.9167 778.194 53.25H743.444V44H790.319V52.75C789.653 59.9167 787.403 66.5 783.569 72.5C779.736 78.4167 774.694 83.125 768.444 86.625C762.194 90.0417 755.236 91.75 747.569 91.75C739.486 91.75 732.111 89.875 725.444 86.125C718.778 82.2917 713.486 77 709.569 70.25C705.736 63.5 703.819 55.875 703.819 47.375C703.819 38.875 705.736 31.25 709.569 24.5C713.486 17.6667 718.778 12.375 725.444 8.625C732.111 4.79167 739.486 2.875 747.569 2.875C756.819 2.875 764.986 5.16667 772.069 9.75C779.236 14.3333 784.444 20.7917 787.694 29.125H774.069Z"/>
</mask>
<path d="M71.125 91H59.75L14 21.625V91H2.625V3.75H14L59.75 73V3.75H71.125V91Z" stroke="white" stroke-width="4" mask="url(#path-1-outside-1)"/>
<path d="M101.891 13.125V42.25H133.641V51.625H101.891V81.625H137.391V91H90.5156V3.75H137.391V13.125H101.891Z" stroke="white" stroke-width="4" mask="url(#path-1-outside-1)"/>
<path d="M181.728 3.875C191.228 3.875 199.436 5.66667 206.353 9.25C213.353 12.75 218.686 17.7917 222.353 24.375C226.103 30.9583 227.978 38.7083 227.978 47.625C227.978 56.5417 226.103 64.2917 222.353 70.875C218.686 77.375 213.353 82.375 206.353 85.875C199.436 89.2917 191.228 91 181.728 91H154.603V3.875H181.728ZM181.728 81.625C192.978 81.625 201.561 78.6667 207.478 72.75C213.394 66.75 216.353 58.375 216.353 47.625C216.353 36.7917 213.353 28.3333 207.353 22.25C201.436 16.1667 192.894 13.125 181.728 13.125H165.978V81.625H181.728Z" stroke="white" stroke-width="4" mask="url(#path-1-outside-1)"/>
<path d="M254.356 3.875V91H242.981V3.875H254.356Z" stroke="white" stroke-width="4" mask="url(#path-1-outside-1)"/>
<path d="M325.243 71.625H287.243L280.243 91H268.243L299.743 4.375H312.868L344.243 91H332.243L325.243 71.625ZM321.993 62.375L306.243 18.375L290.493 62.375H321.993Z" stroke="white" stroke-width="4" mask="url(#path-1-outside-1)"/>
<path d="M426.472 91H415.097L369.347 21.625V91H357.972V3.75H369.347L415.097 73V3.75H426.472V91Z" stroke="white" stroke-width="4" mask="url(#path-1-outside-1)"/>
<path d="M522.812 46.125C525.979 46.625 528.854 47.9167 531.438 50C534.104 52.0833 536.187 54.6667 537.688 57.75C539.271 60.8333 540.062 64.125 540.062 67.625C540.062 72.0417 538.938 76.0417 536.688 79.625C534.438 83.125 531.146 85.9167 526.812 88C522.562 90 517.521 91 511.688 91H479.188V3.875H510.438C516.354 3.875 521.396 4.875 525.562 6.875C529.729 8.79167 532.854 11.4167 534.938 14.75C537.021 18.0833 538.062 21.8333 538.062 26C538.062 31.1667 536.646 35.4583 533.812 38.875C531.063 42.2083 527.396 44.625 522.812 46.125ZM490.562 41.5H509.688C515.021 41.5 519.146 40.25 522.062 37.75C524.979 35.25 526.438 31.7917 526.438 27.375C526.438 22.9583 524.979 19.5 522.062 17C519.146 14.5 514.938 13.25 509.438 13.25H490.562V41.5ZM510.688 81.625C516.354 81.625 520.771 80.2917 523.938 77.625C527.104 74.9583 528.688 71.25 528.688 66.5C528.688 61.6667 527.021 57.875 523.688 55.125C520.354 52.2917 515.896 50.875 510.312 50.875H490.562V81.625H510.688Z" stroke="white" stroke-width="4" mask="url(#path-1-outside-1)"/>
<path d="M567.223 81.75H597.723V91H555.848V3.875H567.223V81.75Z" stroke="white" stroke-width="4" mask="url(#path-1-outside-1)"/>
<path d="M649.303 91.875C641.219 91.875 633.844 90 627.178 86.25C620.511 82.4167 615.219 77.125 611.303 70.375C607.469 63.5417 605.553 55.875 605.553 47.375C605.553 38.875 607.469 31.25 611.303 24.5C615.219 17.6667 620.511 12.375 627.178 8.625C633.844 4.79167 641.219 2.875 649.303 2.875C657.469 2.875 664.886 4.79167 671.553 8.625C678.219 12.375 683.469 17.625 687.303 24.375C691.136 31.125 693.053 38.7917 693.053 47.375C693.053 55.9583 691.136 63.625 687.303 70.375C683.469 77.125 678.219 82.4167 671.553 86.25C664.886 90 657.469 91.875 649.303 91.875ZM649.303 82C655.386 82 660.844 80.5833 665.678 77.75C670.594 74.9167 674.428 70.875 677.178 65.625C680.011 60.375 681.428 54.2917 681.428 47.375C681.428 40.375 680.011 34.2917 677.178 29.125C674.428 23.875 670.636 19.8333 665.803 17C660.969 14.1667 655.469 12.75 649.303 12.75C643.136 12.75 637.636 14.1667 632.803 17C627.969 19.8333 624.136 23.875 621.303 29.125C618.553 34.2917 617.178 40.375 617.178 47.375C617.178 54.2917 618.553 60.375 621.303 65.625C624.136 70.875 627.969 74.9167 632.803 77.75C637.719 80.5833 643.219 82 649.303 82Z" stroke="white" stroke-width="4" mask="url(#path-1-outside-1)"/>
<path d="M774.069 29.125C771.653 24.0417 768.153 20.125 763.569 17.375C758.986 14.5417 753.653 13.125 747.569 13.125C741.486 13.125 735.986 14.5417 731.069 17.375C726.236 20.125 722.403 24.125 719.569 29.375C716.819 34.5417 715.444 40.5417 715.444 47.375C715.444 54.2083 716.819 60.2083 719.569 65.375C722.403 70.5417 726.236 74.5417 731.069 77.375C735.986 80.125 741.486 81.5 747.569 81.5C756.069 81.5 763.069 78.9583 768.569 73.875C774.069 68.7917 777.278 61.9167 778.194 53.25H743.444V44H790.319V52.75C789.653 59.9167 787.403 66.5 783.569 72.5C779.736 78.4167 774.694 83.125 768.444 86.625C762.194 90.0417 755.236 91.75 747.569 91.75C739.486 91.75 732.111 89.875 725.444 86.125C718.778 82.2917 713.486 77 709.569 70.25C705.736 63.5 703.819 55.875 703.819 47.375C703.819 38.875 705.736 31.25 709.569 24.5C713.486 17.6667 718.778 12.375 725.444 8.625C732.111 4.79167 739.486 2.875 747.569 2.875C756.819 2.875 764.986 5.16667 772.069 9.75C779.236 14.3333 784.444 20.7917 787.694 29.125H774.069Z" stroke="white" stroke-width="4" mask="url(#path-1-outside-1)"/>
</svg>

我用css设计它

*{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
body{
        width: 100%;
        height: 100vh;
        background: #000000;
    }   
#logo{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
}

#logo path:nth-of-type(1)
{
    stroke-dasharray: 604.4830322265625;
    stroke-dashoffset: 604.4830322265625;
    animation: line-anim 2s ease forwards;

}   
#logo path:nth-of-type(2)
{
    stroke-dasharray: 463.9680480957031;
    stroke-dashoffset: 463.9680480957031;
    animation: line-anim 2s ease forwards 0.3s;
}
#logo path:nth-of-type(3)
{
    stroke-dasharray: 571.577392578125;
    stroke-dashoffset: 571.577392578125;
    animation: line-anim 2s ease forwards 0.6s;

}
#logo path:nth-of-type(4)
{
    stroke-dasharray: 226.9440460205078;
    stroke-dashoffset: 226.9440460205078;
    animation: line-anim 2s ease forwards 0.9s;

}
#logo path:nth-of-type(5)
{
    stroke-dasharray: 490.2921447753906;
    stroke-dashoffset: 490.2921447753906;
    animation: line-anim 2s ease forwards 1.2s;

}
#logo path:nth-of-type(6)
{
    stroke-dasharray: 604.4830322265625;
    stroke-dashoffset: 604.4830322265625;
    animation: line-anim 2s ease forwards 1.5s;

}
#logo path:nth-of-type(7)
{
    stroke-dasharray: 610.2323608398438;
    stroke-dashoffset: 610.2323608398438;
    animation: line-anim 2s ease forwards 1.8s;

}
#logo path:nth-of-type(8)
{
    stroke-dasharray: 297.21600341796875;
    stroke-dashoffset: 297.21600341796875;
    animation: line-anim 2s ease forwards 2.1s;

}
#logo path:nth-of-type(9)
{
    stroke-dasharray: 565.9515380859375;
    stroke-dashoffset: 565.9515380859375;
    animation: line-anim 2s ease forwards 2.4s;

}
#logo path:nth-of-type(10)
{
    stroke-dasharray: 635.7138061523438;
    stroke-dashoffset: 635.7138061523438;
    animation: line-anim 2s ease forwards 2.7s;

}

@keyframes line-anim{
    to{
        stroke-dashoffset: 0;
    }

}

@keyframes fill{
    from{
        fill:transparent;
    }
    to{
        fill: white;
    }

虽然我的 svg 只是文本，但我找不到让它响应的方法。在移动视图上，一半的文字消失了

标签： csssvg