如何在 HTML 中更改 SVG 中路径的笔触颜色和填充颜色？

Posted

技术标签:

【中文标题】如何在 HTML 中更改 SVG 中路径的笔触颜色和填充颜色？【英文标题】：How to change the stroke color and fill color of just path in SVG in HTML? 【发布时间】：2021-05-16 18:02:25 【问题描述】：

我的 html 文件中有一个 SVG 元素（我从 figma 复制粘贴得到的）。在那个 SVG 中有一个掩码元素和许多路径元素。这个 SVG 基本上是白色的“Hello World”这个词的字母轮廓。

我想做两件事

    更改字母 H 的轮廓颜色（描边）颜色。我通过更改 CSS 中的描边属性来做到这一点。

    我想用不同于原始白色的颜色填充字母“H”。我无法做到这一点。我试着做填充：红色；在 css 中，但这会产生奇怪的红色阴影！（可能是因为它略微透明的红色）

SVG 文件是这个 -

<svg   viewBox="0 0 794 124" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="0.212158" y="-0.167969"   fill="black">
<rect fill="white" x="0.212158" y="-0.167969"  />
<path d="M5.21216 117V110.808L17.5962 108.216V25.704L5.21216 23.4V17.208L41.9322 16.488V22.68L29.4042 25.56V61.416H81.5322V25.56L69.1482 23.4V17.208L105.868 16.488V22.68L93.3402 25.56V108.216L105.868 110.808V117H69.1482V110.808L81.5322 108.216V70.2H29.4042V108.216L41.9322 110.808V117H5.21216Z"/>
<path d="M150.119 118.296C143.687 118.296 137.975 116.856 132.983 113.976C128.087 111 124.247 106.68 121.463 101.016C118.679 95.352 117.287 88.392 117.287 80.136C117.287 71.88 118.727 64.728 121.607 58.68C124.487 52.632 128.519 47.976 133.703 44.712C138.983 41.352 145.223 39.672 152.423 39.672C159.143 39.672 164.663 41.112 168.983 43.992C173.399 46.776 176.663 50.664 178.775 55.656C180.983 60.648 182.087 66.36 182.087 72.792C182.087 73.848 182.039 74.952 181.943 76.104C181.847 77.16 181.751 78.408 181.655 79.848H129.239C129.431 88.872 131.543 96.072 135.575 101.448C139.607 106.728 145.367 109.368 152.855 109.368C156.407 109.368 160.295 108.696 164.519 107.352C168.743 105.912 173.111 103.752 177.623 100.872L181.799 107.352C176.423 111.096 171.047 113.88 165.671 115.704C160.295 117.432 155.111 118.296 150.119 118.296ZM151.559 48.456C145.223 48.456 140.183 50.616 136.439 54.936C132.791 59.16 130.535 64.728 129.671 71.64H170.135C170.231 67.512 169.655 63.72 168.407 60.264C167.159 56.712 165.143 53.88 162.359 51.768C159.671 49.56 156.071 48.456 151.559 48.456Z"/>
<path d="M226.709 110.808V117H192.581V110.808L203.957 108.36V15.336L192.581 13.032V6.84003L215.477 5.83203V108.36L226.709 110.808Z"/>
<path d="M268.193 110.808V117H234.065V110.808L245.441 108.36V15.336L234.065 13.032V6.84003L256.961 5.83203V108.36L268.193 110.808Z"/>
<path d="M314.008 39.672C324.472 39.672 332.728 42.984 338.776 49.608C344.824 56.232 347.848 65.592 347.848 77.688C347.848 85.944 346.408 93.096 343.528 99.144C340.648 105.192 336.472 109.896 331 113.256C325.624 116.616 319.144 118.296 311.56 118.296C301.192 118.296 293.08 115.08 287.224 108.648C281.368 102.12 278.44 92.76 278.44 80.568C278.44 72.216 279.832 64.968 282.616 58.824C285.496 52.68 289.576 47.976 294.856 44.712C300.232 41.352 306.616 39.672 314.008 39.672ZM313.432 48.168C306.04 48.168 300.376 50.952 296.44 56.52C292.504 62.088 290.536 69.912 290.536 79.992C290.536 89.88 292.408 97.32 296.152 102.312C299.896 107.304 305.272 109.8 312.28 109.8C319.96 109.8 325.768 107.016 329.704 101.448C333.736 95.88 335.752 88.152 335.752 78.264C335.752 68.472 333.784 61.032 329.848 55.944C326.008 50.76 320.536 48.168 313.432 48.168Z"/>
<path d="M494.64 17.208L530.064 16.488V22.68L518.544 25.128L492.48 117.144H481.104L456.912 34.632L431.424 117.144H420.048L395.856 25.272L384.048 23.4V17.208L420.768 16.488V22.68L407.808 25.272L426.816 101.88L452.304 17.064L463.104 16.488L487.44 101.592L508.176 25.416L494.64 23.4V17.208Z"/>
<path d="M563.758 39.672C574.222 39.672 582.478 42.984 588.526 49.608C594.574 56.232 597.598 65.592 597.598 77.688C597.598 85.944 596.158 93.096 593.278 99.144C590.398 105.192 586.222 109.896 580.75 113.256C575.374 116.616 568.894 118.296 561.31 118.296C550.942 118.296 542.83 115.08 536.974 108.648C531.118 102.12 528.19 92.76 528.19 80.568C528.19 72.216 529.582 64.968 532.366 58.824C535.246 52.68 539.326 47.976 544.606 44.712C549.982 41.352 556.366 39.672 563.758 39.672ZM563.182 48.168C555.79 48.168 550.126 50.952 546.19 56.52C542.254 62.088 540.286 69.912 540.286 79.992C540.286 89.88 542.158 97.32 545.902 102.312C549.646 107.304 555.022 109.8 562.03 109.8C569.71 109.8 575.518 107.016 579.454 101.448C583.486 95.88 585.502 88.152 585.502 78.264C585.502 68.472 583.534 61.032 579.598 55.944C575.758 50.76 570.286 48.168 563.182 48.168Z"/>
<path d="M609.722 117V110.808L620.954 108.36V50.04L609.722 47.592V41.4L629.882 40.392L631.322 52.632C635.258 48.504 639.194 45.336 643.13 43.128C647.162 40.824 651.482 39.672 656.09 39.672C659.162 39.672 662.378 40.152 665.738 41.112L664.874 62.136H657.674L656.234 49.32C655.178 49.128 654.026 49.032 652.778 49.032C649.13 49.032 645.578 50.088 642.122 52.2C638.762 54.216 635.546 56.904 632.474 60.264V108.36L646.442 110.808V117H609.722Z"/>
<path d="M703.006 110.808V117H668.878V110.808L680.254 108.36V15.336L668.878 13.032V6.84003L691.774 5.83203V108.36L703.006 110.808Z"/>
<path d="M741.764 118.296C736.388 118.296 731.54 116.856 727.22 113.976C722.996 111 719.636 106.68 717.14 101.016C714.644 95.256 713.396 88.296 713.396 80.136C713.396 66.792 716.756 56.712 723.476 49.896C730.292 43.08 739.7 39.672 751.7 39.672C753.812 39.672 756.02 39.816 758.324 40.104C760.724 40.392 763.172 40.824 765.668 41.4V15.624L753.716 13.032V6.84003L777.188 5.83203V108.36L788.42 110.52V116.856L768.26 117.72L766.82 106.92C758.66 114.504 750.308 118.296 741.764 118.296ZM745.796 109.512C748.868 109.512 752.084 108.744 755.444 107.208C758.9 105.672 762.308 103.368 765.668 100.296V50.472C760.484 48.936 755.684 48.168 751.268 48.168C742.82 48.168 736.388 50.904 731.972 56.376C727.556 61.848 725.348 69.432 725.348 79.128C725.348 88.632 727.268 96.072 731.108 101.448C735.044 106.824 739.94 109.512 745.796 109.512Z"/>
</mask>
<path d="M5.21216 117V110.808L17.5962 108.216V25.704L5.21216 23.4V17.208L41.9322 16.488V22.68L29.4042 25.56V61.416H81.5322V25.56L69.1482 23.4V17.208L105.868 16.488V22.68L93.3402 25.56V108.216L105.868 110.808V117H69.1482V110.808L81.5322 108.216V70.2H29.4042V108.216L41.9322 110.808V117H5.21216Z" stroke="white" stroke- mask="url(#path-1-outside-1)"/>
<path d="M150.119 118.296C143.687 118.296 137.975 116.856 132.983 113.976C128.087 111 124.247 106.68 121.463 101.016C118.679 95.352 117.287 88.392 117.287 80.136C117.287 71.88 118.727 64.728 121.607 58.68C124.487 52.632 128.519 47.976 133.703 44.712C138.983 41.352 145.223 39.672 152.423 39.672C159.143 39.672 164.663 41.112 168.983 43.992C173.399 46.776 176.663 50.664 178.775 55.656C180.983 60.648 182.087 66.36 182.087 72.792C182.087 73.848 182.039 74.952 181.943 76.104C181.847 77.16 181.751 78.408 181.655 79.848H129.239C129.431 88.872 131.543 96.072 135.575 101.448C139.607 106.728 145.367 109.368 152.855 109.368C156.407 109.368 160.295 108.696 164.519 107.352C168.743 105.912 173.111 103.752 177.623 100.872L181.799 107.352C176.423 111.096 171.047 113.88 165.671 115.704C160.295 117.432 155.111 118.296 150.119 118.296ZM151.559 48.456C145.223 48.456 140.183 50.616 136.439 54.936C132.791 59.16 130.535 64.728 129.671 71.64H170.135C170.231 67.512 169.655 63.72 168.407 60.264C167.159 56.712 165.143 53.88 162.359 51.768C159.671 49.56 156.071 48.456 151.559 48.456Z" stroke="white" stroke- mask="url(#path-1-outside-1)"/>
<path d="M226.709 110.808V117H192.581V110.808L203.957 108.36V15.336L192.581 13.032V6.84003L215.477 5.83203V108.36L226.709 110.808Z" stroke="white" stroke- mask="url(#path-1-outside-1)"/>
<path d="M268.193 110.808V117H234.065V110.808L245.441 108.36V15.336L234.065 13.032V6.84003L256.961 5.83203V108.36L268.193 110.808Z" stroke="white" stroke- mask="url(#path-1-outside-1)"/>
<path d="M314.008 39.672C324.472 39.672 332.728 42.984 338.776 49.608C344.824 56.232 347.848 65.592 347.848 77.688C347.848 85.944 346.408 93.096 343.528 99.144C340.648 105.192 336.472 109.896 331 113.256C325.624 116.616 319.144 118.296 311.56 118.296C301.192 118.296 293.08 115.08 287.224 108.648C281.368 102.12 278.44 92.76 278.44 80.568C278.44 72.216 279.832 64.968 282.616 58.824C285.496 52.68 289.576 47.976 294.856 44.712C300.232 41.352 306.616 39.672 314.008 39.672ZM313.432 48.168C306.04 48.168 300.376 50.952 296.44 56.52C292.504 62.088 290.536 69.912 290.536 79.992C290.536 89.88 292.408 97.32 296.152 102.312C299.896 107.304 305.272 109.8 312.28 109.8C319.96 109.8 325.768 107.016 329.704 101.448C333.736 95.88 335.752 88.152 335.752 78.264C335.752 68.472 333.784 61.032 329.848 55.944C326.008 50.76 320.536 48.168 313.432 48.168Z" stroke="white" stroke- mask="url(#path-1-outside-1)"/>
<path d="M494.64 17.208L530.064 16.488V22.68L518.544 25.128L492.48 117.144H481.104L456.912 34.632L431.424 117.144H420.048L395.856 25.272L384.048 23.4V17.208L420.768 16.488V22.68L407.808 25.272L426.816 101.88L452.304 17.064L463.104 16.488L487.44 101.592L508.176 25.416L494.64 23.4V17.208Z" stroke="white" stroke- mask="url(#path-1-outside-1)"/>
<path d="M563.758 39.672C574.222 39.672 582.478 42.984 588.526 49.608C594.574 56.232 597.598 65.592 597.598 77.688C597.598 85.944 596.158 93.096 593.278 99.144C590.398 105.192 586.222 109.896 580.75 113.256C575.374 116.616 568.894 118.296 561.31 118.296C550.942 118.296 542.83 115.08 536.974 108.648C531.118 102.12 528.19 92.76 528.19 80.568C528.19 72.216 529.582 64.968 532.366 58.824C535.246 52.68 539.326 47.976 544.606 44.712C549.982 41.352 556.366 39.672 563.758 39.672ZM563.182 48.168C555.79 48.168 550.126 50.952 546.19 56.52C542.254 62.088 540.286 69.912 540.286 79.992C540.286 89.88 542.158 97.32 545.902 102.312C549.646 107.304 555.022 109.8 562.03 109.8C569.71 109.8 575.518 107.016 579.454 101.448C583.486 95.88 585.502 88.152 585.502 78.264C585.502 68.472 583.534 61.032 579.598 55.944C575.758 50.76 570.286 48.168 563.182 48.168Z" stroke="white" stroke- mask="url(#path-1-outside-1)"/>
<path d="M609.722 117V110.808L620.954 108.36V50.04L609.722 47.592V41.4L629.882 40.392L631.322 52.632C635.258 48.504 639.194 45.336 643.13 43.128C647.162 40.824 651.482 39.672 656.09 39.672C659.162 39.672 662.378 40.152 665.738 41.112L664.874 62.136H657.674L656.234 49.32C655.178 49.128 654.026 49.032 652.778 49.032C649.13 49.032 645.578 50.088 642.122 52.2C638.762 54.216 635.546 56.904 632.474 60.264V108.36L646.442 110.808V117H609.722Z" stroke="white" stroke- mask="url(#path-1-outside-1)"/>
<path d="M703.006 110.808V117H668.878V110.808L680.254 108.36V15.336L668.878 13.032V6.84003L691.774 5.83203V108.36L703.006 110.808Z" stroke="white" stroke- mask="url(#path-1-outside-1)"/>
<path d="M741.764 118.296C736.388 118.296 731.54 116.856 727.22 113.976C722.996 111 719.636 106.68 717.14 101.016C714.644 95.256 713.396 88.296 713.396 80.136C713.396 66.792 716.756 56.712 723.476 49.896C730.292 43.08 739.7 39.672 751.7 39.672C753.812 39.672 756.02 39.816 758.324 40.104C760.724 40.392 763.172 40.824 765.668 41.4V15.624L753.716 13.032V6.84003L777.188 5.83203V108.36L788.42 110.52V116.856L768.26 117.72L766.82 106.92C758.66 114.504 750.308 118.296 741.764 118.296ZM745.796 109.512C748.868 109.512 752.084 108.744 755.444 107.208C758.9 105.672 762.308 103.368 765.668 100.296V50.472C760.484 48.936 755.684 48.168 751.268 48.168C742.82 48.168 736.388 50.904 731.972 56.376C727.556 61.848 725.348 69.432 725.348 79.128C725.348 88.632 727.268 96.072 731.108 101.448C735.044 106.824 739.94 109.512 745.796 109.512Z" stroke="white" stroke- mask="url(#path-1-outside-1)"/>
</svg>

我想要做的就是能够将字母“hello World”的填充颜色设置为白色。以及字母“H”的笔触颜色和填充颜色为红色。怎么做？

【问题讨论】：

【参考方案1】：

我想要做的就是能够设置字母的填充颜色 'hello World' 为白色。以及 描边颜色和填充颜色 字母“H”变为红色。怎么做？

解决您的问题不需要面具

我添加了背景来显示白色字母并添加了样式来为字母着色

<style>
.Letter_H 
fill:red;
stroke:red;

.Others_letters 
fill:white;
stroke:white;



</style>
<svg   viewBox="0 0 794 124" fill="none" xmlns="http://www.w3.org/2000/svg"> 
           <!-- background -->
<rect fill="skyblue" x="0.212158" y="-0.167969"  />

<path class="Letter_H" d="M5.21216 117V110.808L17.5962 108.216V25.704L5.21216 23.4V17.208L41.9322 16.488V22.68L29.4042 25.56V61.416H81.5322V25.56L69.1482 23.4V17.208L105.868 16.488V22.68L93.3402 25.56V108.216L105.868 110.808V117H69.1482V110.808L81.5322 108.216V70.2H29.4042V108.216L41.9322 110.808V117H5.21216Z" stroke="red" stroke- />
<path class="Others_letters" d="M150.119 118.296C143.687 118.296 137.975 116.856 132.983 113.976C128.087 111 124.247 106.68 121.463 101.016C118.679 95.352 117.287 88.392 117.287 80.136C117.287 71.88 118.727 64.728 121.607 58.68C124.487 52.632 128.519 47.976 133.703 44.712C138.983 41.352 145.223 39.672 152.423 39.672C159.143 39.672 164.663 41.112 168.983 43.992C173.399 46.776 176.663 50.664 178.775 55.656C180.983 60.648 182.087 66.36 182.087 72.792C182.087 73.848 182.039 74.952 181.943 76.104C181.847 77.16 181.751 78.408 181.655 79.848H129.239C129.431 88.872 131.543 96.072 135.575 101.448C139.607 106.728 145.367 109.368 152.855 109.368C156.407 109.368 160.295 108.696 164.519 107.352C168.743 105.912 173.111 103.752 177.623 100.872L181.799 107.352C176.423 111.096 171.047 113.88 165.671 115.704C160.295 117.432 155.111 118.296 150.119 118.296ZM151.559 48.456C145.223 48.456 140.183 50.616 136.439 54.936C132.791 59.16 130.535 64.728 129.671 71.64H170.135C170.231 67.512 169.655 63.72 168.407 60.264C167.159 56.712 165.143 53.88 162.359 51.768C159.671 49.56 156.071 48.456 151.559 48.456Z" stroke="red" stroke- />
<path class="Others_letters" d="M226.709 110.808V117H192.581V110.808L203.957 108.36V15.336L192.581 13.032V6.84003L215.477 5.83203V108.36L226.709 110.808Z" stroke="red" stroke- />
<path class="Others_letters" d="M268.193 110.808V117H234.065V110.808L245.441 108.36V15.336L234.065 13.032V6.84003L256.961 5.83203V108.36L268.193 110.808Z" stroke="red" stroke- />
<path class="Others_letters" d="M314.008 39.672C324.472 39.672 332.728 42.984 338.776 49.608C344.824 56.232 347.848 65.592 347.848 77.688C347.848 85.944 346.408 93.096 343.528 99.144C340.648 105.192 336.472 109.896 331 113.256C325.624 116.616 319.144 118.296 311.56 118.296C301.192 118.296 293.08 115.08 287.224 108.648C281.368 102.12 278.44 92.76 278.44 80.568C278.44 72.216 279.832 64.968 282.616 58.824C285.496 52.68 289.576 47.976 294.856 44.712C300.232 41.352 306.616 39.672 314.008 39.672ZM313.432 48.168C306.04 48.168 300.376 50.952 296.44 56.52C292.504 62.088 290.536 69.912 290.536 79.992C290.536 89.88 292.408 97.32 296.152 102.312C299.896 107.304 305.272 109.8 312.28 109.8C319.96 109.8 325.768 107.016 329.704 101.448C333.736 95.88 335.752 88.152 335.752 78.264C335.752 68.472 333.784 61.032 329.848 55.944C326.008 50.76 320.536 48.168 313.432 48.168Z" stroke="red" stroke- />
<path class="Others_letters" d="M494.64 17.208L530.064 16.488V22.68L518.544 25.128L492.48 117.144H481.104L456.912 34.632L431.424 117.144H420.048L395.856 25.272L384.048 23.4V17.208L420.768 16.488V22.68L407.808 25.272L426.816 101.88L452.304 17.064L463.104 16.488L487.44 101.592L508.176 25.416L494.64 23.4V17.208Z" stroke="red" stroke- />
<path class="Others_letters" d="M563.758 39.672C574.222 39.672 582.478 42.984 588.526 49.608C594.574 56.232 597.598 65.592 597.598 77.688C597.598 85.944 596.158 93.096 593.278 99.144C590.398 105.192 586.222 109.896 580.75 113.256C575.374 116.616 568.894 118.296 561.31 118.296C550.942 118.296 542.83 115.08 536.974 108.648C531.118 102.12 528.19 92.76 528.19 80.568C528.19 72.216 529.582 64.968 532.366 58.824C535.246 52.68 539.326 47.976 544.606 44.712C549.982 41.352 556.366 39.672 563.758 39.672ZM563.182 48.168C555.79 48.168 550.126 50.952 546.19 56.52C542.254 62.088 540.286 69.912 540.286 79.992C540.286 89.88 542.158 97.32 545.902 102.312C549.646 107.304 555.022 109.8 562.03 109.8C569.71 109.8 575.518 107.016 579.454 101.448C583.486 95.88 585.502 88.152 585.502 78.264C585.502 68.472 583.534 61.032 579.598 55.944C575.758 50.76 570.286 48.168 563.182 48.168Z" stroke="red" stroke- />
<path class="Others_letters" d="M609.722 117V110.808L620.954 108.36V50.04L609.722 47.592V41.4L629.882 40.392L631.322 52.632C635.258 48.504 639.194 45.336 643.13 43.128C647.162 40.824 651.482 39.672 656.09 39.672C659.162 39.672 662.378 40.152 665.738 41.112L664.874 62.136H657.674L656.234 49.32C655.178 49.128 654.026 49.032 652.778 49.032C649.13 49.032 645.578 50.088 642.122 52.2C638.762 54.216 635.546 56.904 632.474 60.264V108.36L646.442 110.808V117H609.722Z" stroke="red" stroke- />
<path class="Others_letters" d="M703.006 110.808V117H668.878V110.808L680.254 108.36V15.336L668.878 13.032V6.84003L691.774 5.83203V108.36L703.006 110.808Z" stroke="red" stroke- />
<path class="Others_letters" d="M741.764 118.296C736.388 118.296 731.54 116.856 727.22 113.976C722.996 111 719.636 106.68 717.14 101.016C714.644 95.256 713.396 88.296 713.396 80.136C713.396 66.792 716.756 56.712 723.476 49.896C730.292 43.08 739.7 39.672 751.7 39.672C753.812 39.672 756.02 39.816 758.324 40.104C760.724 40.392 763.172 40.824 765.668 41.4V15.624L753.716 13.032V6.84003L777.188 5.83203V108.36L788.42 110.52V116.856L768.26 117.72L766.82 106.92C758.66 114.504 750.308 118.296 741.764 118.296ZM745.796 109.512C748.868 109.512 752.084 108.744 755.444 107.208C758.9 105.672 762.308 103.368 765.668 100.296V50.472C760.484 48.936 755.684 48.168 751.268 48.168C742.82 48.168 736.388 50.904 731.972 56.376C727.556 61.848 725.348 69.432 725.348 79.128C725.348 88.632 727.268 96.072 731.108 101.448C735.044 106.824 739.94 109.512 745.796 109.512Z" stroke="red" stroke- />
</svg>

更新

字母阴影选项

<style>
.Letter_H 
fill:red;
stroke:red;
filter:url(#dropshadow);

.Others_letters 
fill:white;
stroke:white;
filter:url(#dropshadow);



</style>
<svg   viewBox="0 0 794 150" fill="none" xmlns="http://www.w3.org/2000/svg"> 
           <!-- background -->
<defs>
    <filter id="dropshadow" x="=20%" y="-20%"  >
        <feOffset result="offsetResult" in="SourceAlpha" dx="4" dy="4" />
        <feGaussianBlur result="blurResult" in="offsetResult" stdDeviation="5" />
        <feBlend in="SourceGraphic" in2="blurResult" mode="normal" />
    </filter>
 
 </defs>
   

<path class="Letter_H" d="M5.21216 117V110.808L17.5962 108.216V25.704L5.21216 23.4V17.208L41.9322 16.488V22.68L29.4042 25.56V61.416H81.5322V25.56L69.1482 23.4V17.208L105.868 16.488V22.68L93.3402 25.56V108.216L105.868 110.808V117H69.1482V110.808L81.5322 108.216V70.2H29.4042V108.216L41.9322 110.808V117H5.21216Z" stroke="red" stroke- />
<path class="Others_letters" d="M150.119 118.296C143.687 118.296 137.975 116.856 132.983 113.976C128.087 111 124.247 106.68 121.463 101.016C118.679 95.352 117.287 88.392 117.287 80.136C117.287 71.88 118.727 64.728 121.607 58.68C124.487 52.632 128.519 47.976 133.703 44.712C138.983 41.352 145.223 39.672 152.423 39.672C159.143 39.672 164.663 41.112 168.983 43.992C173.399 46.776 176.663 50.664 178.775 55.656C180.983 60.648 182.087 66.36 182.087 72.792C182.087 73.848 182.039 74.952 181.943 76.104C181.847 77.16 181.751 78.408 181.655 79.848H129.239C129.431 88.872 131.543 96.072 135.575 101.448C139.607 106.728 145.367 109.368 152.855 109.368C156.407 109.368 160.295 108.696 164.519 107.352C168.743 105.912 173.111 103.752 177.623 100.872L181.799 107.352C176.423 111.096 171.047 113.88 165.671 115.704C160.295 117.432 155.111 118.296 150.119 118.296ZM151.559 48.456C145.223 48.456 140.183 50.616 136.439 54.936C132.791 59.16 130.535 64.728 129.671 71.64H170.135C170.231 67.512 169.655 63.72 168.407 60.264C167.159 56.712 165.143 53.88 162.359 51.768C159.671 49.56 156.071 48.456 151.559 48.456Z" stroke="red" stroke- />
<path class="Others_letters" d="M226.709 110.808V117H192.581V110.808L203.957 108.36V15.336L192.581 13.032V6.84003L215.477 5.83203V108.36L226.709 110.808Z" stroke="red" stroke- />
<path class="Others_letters" d="M268.193 110.808V117H234.065V110.808L245.441 108.36V15.336L234.065 13.032V6.84003L256.961 5.83203V108.36L268.193 110.808Z" stroke="red" stroke- />
<path class="Others_letters" d="M314.008 39.672C324.472 39.672 332.728 42.984 338.776 49.608C344.824 56.232 347.848 65.592 347.848 77.688C347.848 85.944 346.408 93.096 343.528 99.144C340.648 105.192 336.472 109.896 331 113.256C325.624 116.616 319.144 118.296 311.56 118.296C301.192 118.296 293.08 115.08 287.224 108.648C281.368 102.12 278.44 92.76 278.44 80.568C278.44 72.216 279.832 64.968 282.616 58.824C285.496 52.68 289.576 47.976 294.856 44.712C300.232 41.352 306.616 39.672 314.008 39.672ZM313.432 48.168C306.04 48.168 300.376 50.952 296.44 56.52C292.504 62.088 290.536 69.912 290.536 79.992C290.536 89.88 292.408 97.32 296.152 102.312C299.896 107.304 305.272 109.8 312.28 109.8C319.96 109.8 325.768 107.016 329.704 101.448C333.736 95.88 335.752 88.152 335.752 78.264C335.752 68.472 333.784 61.032 329.848 55.944C326.008 50.76 320.536 48.168 313.432 48.168Z" stroke="red" stroke- />
<path class="Others_letters" d="M494.64 17.208L530.064 16.488V22.68L518.544 25.128L492.48 117.144H481.104L456.912 34.632L431.424 117.144H420.048L395.856 25.272L384.048 23.4V17.208L420.768 16.488V22.68L407.808 25.272L426.816 101.88L452.304 17.064L463.104 16.488L487.44 101.592L508.176 25.416L494.64 23.4V17.208Z" stroke="red" stroke- />
<path class="Others_letters" d="M563.758 39.672C574.222 39.672 582.478 42.984 588.526 49.608C594.574 56.232 597.598 65.592 597.598 77.688C597.598 85.944 596.158 93.096 593.278 99.144C590.398 105.192 586.222 109.896 580.75 113.256C575.374 116.616 568.894 118.296 561.31 118.296C550.942 118.296 542.83 115.08 536.974 108.648C531.118 102.12 528.19 92.76 528.19 80.568C528.19 72.216 529.582 64.968 532.366 58.824C535.246 52.68 539.326 47.976 544.606 44.712C549.982 41.352 556.366 39.672 563.758 39.672ZM563.182 48.168C555.79 48.168 550.126 50.952 546.19 56.52C542.254 62.088 540.286 69.912 540.286 79.992C540.286 89.88 542.158 97.32 545.902 102.312C549.646 107.304 555.022 109.8 562.03 109.8C569.71 109.8 575.518 107.016 579.454 101.448C583.486 95.88 585.502 88.152 585.502 78.264C585.502 68.472 583.534 61.032 579.598 55.944C575.758 50.76 570.286 48.168 563.182 48.168Z" stroke="red" stroke- />
<path class="Others_letters" d="M609.722 117V110.808L620.954 108.36V50.04L609.722 47.592V41.4L629.882 40.392L631.322 52.632C635.258 48.504 639.194 45.336 643.13 43.128C647.162 40.824 651.482 39.672 656.09 39.672C659.162 39.672 662.378 40.152 665.738 41.112L664.874 62.136H657.674L656.234 49.32C655.178 49.128 654.026 49.032 652.778 49.032C649.13 49.032 645.578 50.088 642.122 52.2C638.762 54.216 635.546 56.904 632.474 60.264V108.36L646.442 110.808V117H609.722Z" stroke="red" stroke- />
<path class="Others_letters" d="M703.006 110.808V117H668.878V110.808L680.254 108.36V15.336L668.878 13.032V6.84003L691.774 5.83203V108.36L703.006 110.808Z" stroke="red" stroke- />
<path class="Others_letters" d="M741.764 118.296C736.388 118.296 731.54 116.856 727.22 113.976C722.996 111 719.636 106.68 717.14 101.016C714.644 95.256 713.396 88.296 713.396 80.136C713.396 66.792 716.756 56.712 723.476 49.896C730.292 43.08 739.7 39.672 751.7 39.672C753.812 39.672 756.02 39.816 758.324 40.104C760.724 40.392 763.172 40.824 765.668 41.4V15.624L753.716 13.032V6.84003L777.188 5.83203V108.36L788.42 110.52V116.856L768.26 117.72L766.82 106.92C758.66 114.504 750.308 118.296 741.764 118.296ZM745.796 109.512C748.868 109.512 752.084 108.744 755.444 107.208C758.9 105.672 762.308 103.368 765.668 100.296V50.472C760.484 48.936 755.684 48.168 751.268 48.168C742.82 48.168 736.388 50.904 731.972 56.376C727.556 61.848 725.348 69.432 725.348 79.128C725.348 88.632 727.268 96.072 731.108 101.448C735.044 106.824 739.94 109.512 745.796 109.512Z" stroke="red" stroke- />
</svg>

【讨论】：

【参考方案2】：

给 H 一个 id="H" 并使用末尾的路径&lt;use xlink:href="#H" fill="red"/&gt;

您还可以通过为掩码中的路径为每个路径指定一个 id 并以白色笔划重用这些路径来简化代码：&lt;use xlink:href="#H" stroke="white" stroke-width="10" mask="url(#path-1-outside-1)"/&gt; 

bodybackground:black;
<svg   viewBox="0 0 794 124" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="0.212158" y="-0.167969"   fill="black">
<rect fill="white" x="0.212158" y="-0.167969"  />
<path id="H" d="M5.21216 117V110.808L17.5962 108.216V25.704L5.21216 23.4V17.208L41.9322 16.488V22.68L29.4042 25.56V61.416H81.5322V25.56L69.1482 23.4V17.208L105.868 16.488V22.68L93.3402 25.56V108.216L105.868 110.808V117H69.1482V110.808L81.5322 108.216V70.2H29.4042V108.216L41.9322 110.808V117H5.21216Z"/>

</mask>
<use xlink:href="#H" stroke="white" stroke- mask="url(#path-1-outside-1)"/>

<use xlink:href="#H" fill="red"/>

</svg>

【讨论】：

以上是关于如何在 HTML 中更改 SVG 中路径的笔触颜色和填充颜色？的主要内容，如果未能解决你的问题，请参考以下文章

使用对象时如何在鼠标悬停时更改 SVG 笔触颜色

更改内联 SVG 的笔触颜色

如何在 <img> 标签中更改 svg 的笔触颜色？ [复制]

使用 Styled Components 更改 SVG 笔触的颜色

如何在JS中指定路径的颜色属性（填充和笔触）

如何在html对象元素中更改svg位置的背景颜色[重复]