javascript SVG:尝试设置填充颜色时笔划动画不工作

kpbwa7wx  于 2023-02-15  发布在  Java
关注(0)|答案(1)|浏览(128)

我有一个只能使用填充的笔划动画:透明,因为当我设置填充颜色时,填充与动画重叠。但是我需要设置填充颜色以产生手写效果。
这是我的当前代码:

svg#handwriting {
    width: 300px;
    height: 200px;
    z-index: 999;
    transform: rotate(350deg);
}
svg#handwriting path {
    stroke: black;
    stroke-width:2;
    stroke-dasharray: 4163;
    animation: fillSvg 5s ease-out;
    fill: transparent;
}

@keyframes fillSvg {
    0%{
        stroke-dashoffset: 4163;
    }
    100%{
        stroke-dashoffset: 0;
    }    
}
<svg id="handwriting" xmlns="http://www.w3.org/2000/svg" width="1584" height="640" viewBox="0 0 1188 480">
    <path d="M304.6 35.2c-1.7 1.8-3.8 4.4-4.7 5.7l-1.5 2.4-106.4.2c-58.6.1-108.5.6-111 1-6.2 1.1-8 2.2-8 5 0 3.1 4.3 6.4 14.3 11C97.5 65.2 103 66 106 63c1.5-1.5 2-2.9 1.6-4.4l-.6-2.3 19.3-.6c10.5-.4 52.2-1 92.5-1.4l73.3-.6-7.2 12.4C225.6 169.2 136.1 343 108 409.8c-7.3 17.2-14 36.6-14 40.5 0 4.4 3.4 5.8 8.4 3.5 2-.8 5.5-6.8 15-25.2 6.8-13.3 15.8-31.5 20.1-40.5 7.3-15.5 7.7-16.6 6.6-19.7-1.1-3.2-.5-4.6 14.1-35.6 20.2-42.8 65.3-133.3 81.3-163.3 19.6-36.8 57.2-102.8 64.5-113.4l1.5-2.1 97-1c130.6-1.4 212.7-3 214.3-4.2 2-1.7 1.4-5.6-1.3-7.4-6-3.9-66.8-4.1-176.5-.4-15.1.5-49.6 1.1-76.7 1.5l-49.2.6.6-3.6c.4-2.6.1-4.1-1.2-5.5-2.5-2.8-4.2-2.5-7.9 1.2zM525.5 200.6c-10.3 10.5-31.2 41.3-54.2 79.4-15.5 25.8-23.4 41.3-24 47.4-.5 4.1-.3 4.6 2 5.7 2.3 1 3.2.8 6.9-1.6 2.4-1.5 24.6-23.1 49.3-48 38.1-38.4 56.1-55.5 58-55.5.2 0-5.4 17.2-12.5 38.1-7.2 21-13 39.6-13 41.4 0 2.2.9 4.1 2.6 5.9 6.9 6.8 14.8 1.4 56.4-38.4 28-26.8 31.7-30 34.6-30 3 0 3.9 3.1 3.1 11.4-.6 5.7-1.4 9.2-6.6 28.4-2.4 8.6-3.6 20.6-2.7 25.6 1.4 7.2 8.3 11.9 14.9 10.2 6.6-1.6 36.8-24.8 51.9-39.7 7.8-7.7 8.8-9.1 8.8-12.3 0-4.7-2.5-6.2-6.6-3.7-1.6 1-10.7 9.3-20.2 18.5-22.6 21.9-32.3 28.1-35.2 22.7-1.1-2.1-.1-8.3 4.5-29.5 4.7-21.5 3.3-36.4-3.8-41.1-3.2-2.1-11.5-2.2-15.3-.2-7.1 3.8-28.4 22-54.5 46.9l-18.5 17.7 6.6-17.7c10.1-27 18-50.5 18-53.8 0-6.2-6.4-12.4-12.7-12.4-7.9 0-30.3 20.6-78 71.7-4.5 4.8-8.3 8.3-8.3 7.8 0-.6 2.7-6 6.1-12 6.3-11.5 15.5-25.3 38.9-59 7.7-11 13.9-20.9 14-22 0-2.7-2.7-6.5-4.6-6.5-.8 0-3.5 2.1-5.9 4.6zM1021.5 204.5c-25.3 4.7-47.5 15.5-61.6 30.2-7.8 8.1-11.6 15-12.8 23.3-1.7 12.7.8 18.5 15.5 36.2 7.5 9 9.7 12.4 10.7 16.8.5 2.2-.1 3-4.5 6-19.7 13.3-35.8 27.7-38.7 34.8-2.9 7.1 1.1 11.2 11.7 12 22 1.5 41.1-14 44.1-36.2.6-3.7 1.1-6.9 1.3-7.1 3.1-2.9 47.1-27.5 63.9-35.8 23.2-11.5 24.9-12.7 24.9-18.2 0-3.3-2.8-4.7-7.1-3.5-7 2-52.6 25.4-77.4 39.8l-7 4.1-2.2-4.7c-1.3-2.6-5.5-8.5-9.4-13.2-3.9-4.7-8.7-10.8-10.6-13.6-13-19.4 4.4-41.2 43-53.9 13.8-4.5 28.9-6.9 38.5-6.2 9 .7 12 2.5 14.3 8.8 1.4 3.7 2.1 4.4 4.6 4.7 4.1.4 6.7-2.7 6.5-7.8-.3-7.6-4.4-12.4-13.4-15.6-6.2-2.2-24.5-2.7-34.3-.9zm-48.6 126.2c-2.2 5.9-6.1 11.4-10.6 14.8-4.5 3.4-14.1 7.1-16.5 6.3-1.9-.7 5.9-8.4 13.5-13.4 4-2.6 8.8-6 10.7-7.6 1.9-1.5 3.6-2.8 3.7-2.8.1 0-.2 1.2-.8 2.7z"/>
    <path d="M347.5 228.6c-29.2 7.3-44.4 33.9-27.7 48.5 1.9 1.7 5.1 3.8 7 4.6 2 .8 3.2 1.9 2.9 2.7-2.7 7-5.7 18.5-5.7 21.9 0 5.1 3.4 12.3 7.1 15 3.7 2.7 10.8 3.3 16.3 1.4 9.7-3.3 21.9-14.4 31.4-28.6 3.1-4.7 5.7-8.7 5.7-8.7 0-.1 6.4-1.4 14.2-2.8 15.5-2.8 29.3-7.3 33-10.8 2.7-2.5 3.1-7.3.7-8.6-2-1.1-7-.2-22 4.1-6.5 1.9-13.8 3.7-16.1 4.1l-4.3.6 1.1-2.7c.6-1.6 1.1-6.5 1.1-11 0-13.6-5.7-22.9-17.2-28.2-6.9-3.1-18.6-3.8-27.5-1.5zm24.1 13c2.1 1 4.9 3.5 6.2 5.4 2.2 3.2 2.3 4.3 1.9 12.5-.2 4.9-.9 10.2-1.5 11.7L377 274h-14.5c-10.9 0-14.5-.3-14.5-1.3 0-.6 2.7-4.8 6-9.2 3.3-4.4 6-8.4 6-8.8 0-1.5-4.9-5.7-6.8-5.7-3.3 0-8.4 5.9-14.2 16.5-1.9 3.3-3.4 6.1-3.5 6.3-.5.7-6.2-2.1-8.2-4-3-2.8-3.1-9.9-.3-14.5 3.6-5.9 13.9-11.6 25-13.7 5.1-.9 15.8.1 19.6 2zm-2.9 44.2c.8.5-.3 2.7-3.8 7.2-10.5 13.6-24.8 21.8-27.9 16.1-1.9-3.6-1-8.5 3.9-21.4l1.1-2.7h12.7c7.1 0 13.3.4 14 .8zM842.5 228.9c-1.6 1-5 3.9-7.5 6.5-4.9 5.1-5.9 5.4-8.4 2.7-.9-1-4.5-3.2-7.9-4.7-5.6-2.6-7.2-2.9-16.7-2.8-9.4 0-11.4.4-18.5 3.2-11.3 4.5-19.6 10.2-30.1 20.7-14.5 14.5-22.4 30.1-22.6 44.6 0 4.8.5 7.6 2.1 10.7 8.7 17.1 30.9 7.6 75-32 6.9-6.2 12.1-10.4 11.7-9.3-10.7 26.2-12.5 38.7-6.8 46.4 2.5 3.5 7.9 6.1 12.5 6.1 12.2 0 46.9-18 66-34.1 11.4-9.7 14.9-16 11.8-21.7-2.3-4.2-5.2-2.8-20 10.3-7.9 6.8-17.5 14.9-21.5 17.9-12.9 9.7-26.9 16.1-33.8 15.4-3.3-.3-3.3-.3-3.6-6.1-.6-10.7 2.5-18.5 20.7-52.9 4-7.6 7.3-15.1 7.3-16.7.2-5.9-4.1-7.7-9.7-4.2zM809.9 243c1.9.5 5.2 2.1 7.3 3.5l3.9 2.6-8.9 8.4c-38.3 36.1-64 53.6-68.9 46.9-.7-1-1.3-3.4-1.3-5.4 0-9.5 6.1-20.8 18.2-33.5 16.7-17.6 36.1-26.4 49.7-22.5z"/>
</svg>

任何建议都会很有帮助。

xcitsw88

xcitsw881#

也许这只是选择一个与你的笔画颜色形成对比的填充颜色的问题?我在这里所做的只是将transparent更改为yellow,很明显填充完全不覆盖笔画。

svg#handwriting {
    width: 300px;
    height: 200px;
    z-index: 999;
    transform: rotate(350deg);
}
svg#handwriting path {
    stroke: black;
    stroke-width:2;
    stroke-dasharray: 4163;
    animation: fillSvg 5s ease-out;
    fill: yellow;
}

@keyframes fillSvg {
    0%{
        stroke-dashoffset: 4163;
    }
    100%{
        stroke-dashoffset: 0;
    }    
}
<svg id="handwriting" xmlns="http://www.w3.org/2000/svg" width="1584" height="640" viewBox="0 0 1188 480">
    <path d="M304.6 35.2c-1.7 1.8-3.8 4.4-4.7 5.7l-1.5 2.4-106.4.2c-58.6.1-108.5.6-111 1-6.2 1.1-8 2.2-8 5 0 3.1 4.3 6.4 14.3 11C97.5 65.2 103 66 106 63c1.5-1.5 2-2.9 1.6-4.4l-.6-2.3 19.3-.6c10.5-.4 52.2-1 92.5-1.4l73.3-.6-7.2 12.4C225.6 169.2 136.1 343 108 409.8c-7.3 17.2-14 36.6-14 40.5 0 4.4 3.4 5.8 8.4 3.5 2-.8 5.5-6.8 15-25.2 6.8-13.3 15.8-31.5 20.1-40.5 7.3-15.5 7.7-16.6 6.6-19.7-1.1-3.2-.5-4.6 14.1-35.6 20.2-42.8 65.3-133.3 81.3-163.3 19.6-36.8 57.2-102.8 64.5-113.4l1.5-2.1 97-1c130.6-1.4 212.7-3 214.3-4.2 2-1.7 1.4-5.6-1.3-7.4-6-3.9-66.8-4.1-176.5-.4-15.1.5-49.6 1.1-76.7 1.5l-49.2.6.6-3.6c.4-2.6.1-4.1-1.2-5.5-2.5-2.8-4.2-2.5-7.9 1.2zM525.5 200.6c-10.3 10.5-31.2 41.3-54.2 79.4-15.5 25.8-23.4 41.3-24 47.4-.5 4.1-.3 4.6 2 5.7 2.3 1 3.2.8 6.9-1.6 2.4-1.5 24.6-23.1 49.3-48 38.1-38.4 56.1-55.5 58-55.5.2 0-5.4 17.2-12.5 38.1-7.2 21-13 39.6-13 41.4 0 2.2.9 4.1 2.6 5.9 6.9 6.8 14.8 1.4 56.4-38.4 28-26.8 31.7-30 34.6-30 3 0 3.9 3.1 3.1 11.4-.6 5.7-1.4 9.2-6.6 28.4-2.4 8.6-3.6 20.6-2.7 25.6 1.4 7.2 8.3 11.9 14.9 10.2 6.6-1.6 36.8-24.8 51.9-39.7 7.8-7.7 8.8-9.1 8.8-12.3 0-4.7-2.5-6.2-6.6-3.7-1.6 1-10.7 9.3-20.2 18.5-22.6 21.9-32.3 28.1-35.2 22.7-1.1-2.1-.1-8.3 4.5-29.5 4.7-21.5 3.3-36.4-3.8-41.1-3.2-2.1-11.5-2.2-15.3-.2-7.1 3.8-28.4 22-54.5 46.9l-18.5 17.7 6.6-17.7c10.1-27 18-50.5 18-53.8 0-6.2-6.4-12.4-12.7-12.4-7.9 0-30.3 20.6-78 71.7-4.5 4.8-8.3 8.3-8.3 7.8 0-.6 2.7-6 6.1-12 6.3-11.5 15.5-25.3 38.9-59 7.7-11 13.9-20.9 14-22 0-2.7-2.7-6.5-4.6-6.5-.8 0-3.5 2.1-5.9 4.6zM1021.5 204.5c-25.3 4.7-47.5 15.5-61.6 30.2-7.8 8.1-11.6 15-12.8 23.3-1.7 12.7.8 18.5 15.5 36.2 7.5 9 9.7 12.4 10.7 16.8.5 2.2-.1 3-4.5 6-19.7 13.3-35.8 27.7-38.7 34.8-2.9 7.1 1.1 11.2 11.7 12 22 1.5 41.1-14 44.1-36.2.6-3.7 1.1-6.9 1.3-7.1 3.1-2.9 47.1-27.5 63.9-35.8 23.2-11.5 24.9-12.7 24.9-18.2 0-3.3-2.8-4.7-7.1-3.5-7 2-52.6 25.4-77.4 39.8l-7 4.1-2.2-4.7c-1.3-2.6-5.5-8.5-9.4-13.2-3.9-4.7-8.7-10.8-10.6-13.6-13-19.4 4.4-41.2 43-53.9 13.8-4.5 28.9-6.9 38.5-6.2 9 .7 12 2.5 14.3 8.8 1.4 3.7 2.1 4.4 4.6 4.7 4.1.4 6.7-2.7 6.5-7.8-.3-7.6-4.4-12.4-13.4-15.6-6.2-2.2-24.5-2.7-34.3-.9zm-48.6 126.2c-2.2 5.9-6.1 11.4-10.6 14.8-4.5 3.4-14.1 7.1-16.5 6.3-1.9-.7 5.9-8.4 13.5-13.4 4-2.6 8.8-6 10.7-7.6 1.9-1.5 3.6-2.8 3.7-2.8.1 0-.2 1.2-.8 2.7z"/>
    <path d="M347.5 228.6c-29.2 7.3-44.4 33.9-27.7 48.5 1.9 1.7 5.1 3.8 7 4.6 2 .8 3.2 1.9 2.9 2.7-2.7 7-5.7 18.5-5.7 21.9 0 5.1 3.4 12.3 7.1 15 3.7 2.7 10.8 3.3 16.3 1.4 9.7-3.3 21.9-14.4 31.4-28.6 3.1-4.7 5.7-8.7 5.7-8.7 0-.1 6.4-1.4 14.2-2.8 15.5-2.8 29.3-7.3 33-10.8 2.7-2.5 3.1-7.3.7-8.6-2-1.1-7-.2-22 4.1-6.5 1.9-13.8 3.7-16.1 4.1l-4.3.6 1.1-2.7c.6-1.6 1.1-6.5 1.1-11 0-13.6-5.7-22.9-17.2-28.2-6.9-3.1-18.6-3.8-27.5-1.5zm24.1 13c2.1 1 4.9 3.5 6.2 5.4 2.2 3.2 2.3 4.3 1.9 12.5-.2 4.9-.9 10.2-1.5 11.7L377 274h-14.5c-10.9 0-14.5-.3-14.5-1.3 0-.6 2.7-4.8 6-9.2 3.3-4.4 6-8.4 6-8.8 0-1.5-4.9-5.7-6.8-5.7-3.3 0-8.4 5.9-14.2 16.5-1.9 3.3-3.4 6.1-3.5 6.3-.5.7-6.2-2.1-8.2-4-3-2.8-3.1-9.9-.3-14.5 3.6-5.9 13.9-11.6 25-13.7 5.1-.9 15.8.1 19.6 2zm-2.9 44.2c.8.5-.3 2.7-3.8 7.2-10.5 13.6-24.8 21.8-27.9 16.1-1.9-3.6-1-8.5 3.9-21.4l1.1-2.7h12.7c7.1 0 13.3.4 14 .8zM842.5 228.9c-1.6 1-5 3.9-7.5 6.5-4.9 5.1-5.9 5.4-8.4 2.7-.9-1-4.5-3.2-7.9-4.7-5.6-2.6-7.2-2.9-16.7-2.8-9.4 0-11.4.4-18.5 3.2-11.3 4.5-19.6 10.2-30.1 20.7-14.5 14.5-22.4 30.1-22.6 44.6 0 4.8.5 7.6 2.1 10.7 8.7 17.1 30.9 7.6 75-32 6.9-6.2 12.1-10.4 11.7-9.3-10.7 26.2-12.5 38.7-6.8 46.4 2.5 3.5 7.9 6.1 12.5 6.1 12.2 0 46.9-18 66-34.1 11.4-9.7 14.9-16 11.8-21.7-2.3-4.2-5.2-2.8-20 10.3-7.9 6.8-17.5 14.9-21.5 17.9-12.9 9.7-26.9 16.1-33.8 15.4-3.3-.3-3.3-.3-3.6-6.1-.6-10.7 2.5-18.5 20.7-52.9 4-7.6 7.3-15.1 7.3-16.7.2-5.9-4.1-7.7-9.7-4.2zM809.9 243c1.9.5 5.2 2.1 7.3 3.5l3.9 2.6-8.9 8.4c-38.3 36.1-64 53.6-68.9 46.9-.7-1-1.3-3.4-1.3-5.4 0-9.5 6.1-20.8 18.2-33.5 16.7-17.6 36.1-26.4 49.7-22.5z"/>
</svg>

相关问题