英文:
SVG fill color not filling empty space with outline
问题
我是新手使用SVG。我有一个聊天SVG图标，我需要用蓝色填充它。通过"fill"，我指的是需要填充这两个聊天符号之间的空白空间（白色的空白部分），并在这些部分周围加上白色的轮廓。
在查看了一些资源后，我了解到了"fill"和"stroke"属性。应用这些属性后，只是改变了黑色的边框颜色。所以我搜索了一下并找到了这个Stack Overflow链接（https://stackoverflow.com/questions/68146487/fill-svg-with-color）。在这个链接的帮助下，我成功地填充了这些空白部分为蓝色。现在我不确定如何实现每个聊天符号周围的白色轮廓/边框。
我的原始SVG：
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="25px" height="25px" viewBox="0 0 64 64">
<path d="M8.93022208,42.4845518 C11.6578635,42.4845518 17.2343876,39.7366925 21.3359462,36.8070083 C25.457698,36.9484387 29.3168152,36.3220925 32.6708152,35.109807 C35.7621394,37.3929435 40.0252842,38.7062525 44.7735601,38.605229 C47.9051463,40.8277656 51.5825256,42.4845518 53.3605946,42.4845518 C54.9768704,42.4845518 55.7647325,40.9489656 54.8150773,39.6760801 C54.2494222,38.9285049 53.299767,37.5747849 52.6534222,36.4433214 C57.0375601,34.2612083 59.7652842,30.1798345 59.7652842,25.7145931 C59.7652842,18.8247724 53.2190773,13.2482897 44.8542497,12.7835586 C41.8840428,5.44924139 33.2971738,0.155586207 23.0735462,0.155586207 C10.3445669,0.155586207 0.161379311,8.35874484 0.161379311,18.5217104 C0.161379311,25.1488552 4.40436001,31.0284414 10.7890635,33.9783435 C9.87987726,35.7361552 8.18266346,38.1203132 7.27343587,39.3123932 C6.2025807,40.7267173 6.84913243,42.4845518 8.93022208,42.4845518 Z M10.9304979,38.9285049 C12.0619738,37.534378 13.6783324,35.4330828 14.3653117,34.1399794 C14.9310497,33.0893338 14.7896152,32.1599173 13.4965117,31.5537932 C7.15223587,28.6038621 3.5153669,23.8961794 3.5153669,18.5217104 C3.5153669,10.2377793 12.1832152,3.48939311 23.0735462,3.48939311 C31.3777118,3.48939311 38.3887325,7.38889656 41.2579739,12.9048 C33.5396152,13.8544138 27.660029,19.1884552 27.660029,25.7145931 C27.660029,28.2806069 28.528829,30.604138 30.0441807,32.5640111 C27.8822773,33.1903573 25.5385531,33.5338387 23.0735462,33.5338387 C22.6694773,33.5338387 22.0431187,33.5136332 21.2349393,33.4934276 C20.3863324,33.4934276 19.7397807,33.7560911 18.9719876,34.3622318 C16.486829,36.160455 12.8903876,38.3829766 11.0517393,39.1305518 C10.8901117,39.1911642 10.8294911,39.0699394 10.9304979,38.9285049 Z M43.5205946,35.5745173 C36.5299325,35.5745173 30.7311601,31.1698759 30.7311601,25.7145931 C30.7311601,20.2593104 36.5299325,15.8546897 43.7229394,15.8546897 C50.8956291,15.8546897 56.6941118,20.2593104 56.6941118,25.7145931 C56.6941118,29.3918483 54.6334222,32.1397118 50.4913532,34.079367 C49.6223877,34.4632552 49.1779739,35.2714470 49.6223877,36.2614784 C50.0266635,37.1504856 50.5923187,38.1405187 51.2390773,38.9082994 C51.3603187,39.0093228 51.2792153,39.1103463 51.1381118,39.0295283 C49.8247325,38.3021587 48.0263877,37.1908966 46.5714911,36.1806596 C45.9251463,35.7159505 45.3797670,35.5341079 44.7735601,35.5341079 C44.349
<details>
<summary>英文:</summary>
I am new to SVG. I have chat svg icon that i need to fill with blue colour. And by fill means i need to fill in the empty spaces between these two chat symbols (The empty white space) with a white outline around those.
By looking at some resources i came to know about fill, stroke attributes. After applying those it was just changing black border colour only. So i googled and found this SO (https://stackoverflow.com/questions/68146487/fill-svg-with-color). With the help of this i managed to fill in those empty spaces with blue colour. Now I am not sure how can i achieve the white outline/border around each chat symbol.
My original SVG:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="25px" height="25px" viewBox="0 0 64 64">
<path d="M8.93022208,42.4845518 C11.6578635,42.4845518 17.2343876,39.7366925 21.3359462,36.8070083 C25.457698,36.9484387 29.3168152,36.3220925 32.6708152,35.109807 C35.7621394,37.3929435 40.0252842,38.7062525 44.7735601,38.605229 C47.9051463,40.8277656 51.5825256,42.4845518 53.3605946,42.4845518 C54.9768704,42.4845518 55.7647325,40.9489656 54.8150773,39.6760801 C54.2494222,38.9285049 53.299767,37.5747849 52.6534222,36.4433214 C57.0375601,34.2612083 59.7652842,30.1798345 59.7652842,25.7145931 C59.7652842,18.8247724 53.2190773,13.2482897 44.8542497,12.7835586 C41.8840428,5.44924139 33.2971738,0.155586207 23.0735462,0.155586207 C10.3445669,0.155586207 0.161379311,8.35874484 0.161379311,18.5217104 C0.161379311,25.1488552 4.40436001,31.0284414 10.7890635,33.9783435 C9.87987726,35.7361552 8.18266346,38.1203132 7.27343587,39.3123932 C6.2025807,40.7267173 6.84913243,42.4845518 8.93022208,42.4845518 Z M10.9304979,38.9285049 C12.0619738,37.534378 13.6783324,35.4330828 14.3653117,34.1399794 C14.9310497,33.0893338 14.7896152,32.1599173 13.4965117,31.5537932 C7.15223587,28.6038621 3.5153669,23.8961794 3.5153669,18.5217104 C3.5153669,10.2377793 12.1832152,3.48939311 23.0735462,3.48939311 C31.3777118,3.48939311 38.3887325,7.38889656 41.2579739,12.9048 C33.5396152,13.8544138 27.660029,19.1884552 27.660029,25.7145931 C27.660029,28.2806069 28.528829,30.604138 30.0441807,32.5640111 C27.8822773,33.1903573 25.5385531,33.5338387 23.0735462,33.5338387 C22.6694773,33.5338387 22.0431187,33.5136332 21.2349393,33.4934276 C20.3863324,33.4934276 19.7397807,33.7560911 18.9719876,34.3622318 C16.486829,36.160455 12.8903876,38.3829766 11.0517393,39.1305518 C10.8901117,39.1911642 10.8294911,39.0699394 10.9304979,38.9285049 Z M43.5205946,35.5745173 C36.5299325,35.5745173 30.7311601,31.1698759 30.7311601,25.7145931 C30.7311601,20.2593104 36.5299325,15.8546897 43.7229394,15.8546897 C50.8956291,15.8546897 56.6941118,20.2593104 56.6941118,25.7145931 C56.6941118,29.3918483 54.6334222,32.1397118 50.4913532,34.079367 C49.6223877,34.4632552 49.1779739,35.271447 49.6223877,36.2614784 C50.0266635,37.1504856 50.5923187,38.1405187 51.2390773,38.9082994 C51.3603187,39.0093228 51.2792153,39.1103463 51.1381118,39.0295283 C49.8247325,38.3021587 48.0263877,37.1908966 46.5714911,36.1806596 C45.9251463,35.7159505 45.379767,35.5341079 44.7735601,35.5341079 C44.3490083,35.5543126 43.9451463,35.5745173 43.5205946,35.5745173 Z" transform="translate(2 10.69)"></path>
</svg>
<!-- end snippet -->
This is what i able to do so far.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="25px" height="25px" viewBox="0 0 64 64">
<path stroke="white" fill="blue" stroke-width="0.5"
fill-opacity="1" stroke-opacity="0.5" d="M8.93022208,42.4845518 C11.6578635,42.4845518 17.2343876,39.7366925 21.3359462,36.8070083 C25.457698,36.9484387 29.3168152,36.3220925 32.6708152,35.109807 C35.7621394,37.3929435 40.0252842,38.7062525 44.7735601,38.605229 C47.9051463,40.8277656 51.5825256,42.4845518 53.3605946,42.4845518 C54.9768704,42.4845518 55.7647325,40.9489656 54.8150773,39.6760801 C54.2494222,38.9285049 53.299767,37.5747849 52.6534222,36.4433214 C57.0375601,34.2612083 59.7652842,30.1798345 59.7652842,25.7145931 C59.7652842,18.8247724 53.2190773,13.2482897 44.8542497,12.7835586 C41.8840428,5.44924139 33.2971738,0.155586207 23.0735462,0.155586207 C10.3445669,0.155586207 0.161379311,8.35874484 0.161379311,18.5217104 C0.161379311,25.1488552 4.40436001,31.0284414 10.7890635,33.9783435 C9.87987726,35.7361552 8.18266346,38.1203132 7.27343587,39.3123932 C6.2025807,40.7267173 6.84913243,42.4845518 8.93022208,42.4845518 Z M10.9304979,38.9285049 C12.0619738,37.534378 13.6783324,38.9285049 Z,36.1806596 C45.9251463" transform="translate(2 10.69)"/>
</svg>
<!-- end snippet -->
Looking for this end result:
[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/38xYd.png
Can anyone please help me here?
Also please let know if removing some part of d attribute was correct way of doing this.
</details>
# 答案1
**得分**: 2
我已经将"d"属性分为2个路径，并删除了"d"属性的第一部分，因为它是两个对话框的轮廓。这是结果：
```html
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="250px" height="250px" viewBox="0 0 64 64">
<g transform="translate(2 10.69)" fill="blue" stroke="blue" >
<path d="M10.9304979,38.9285049 C12.0619738,37.534378 13.6783324,35.4330828 14.3653117,34.1399794 C14.9310497,33.0893338 14.7896152,32.1599173 13.4965117,31.5537932 C7.15223587,28.6038621 3.5153669,23.8961794 3.5153669,18.5217104 C3.5153669,10.2377793 12.1832152,3.48939311 23.0735462,3.48939311 C31.3777118,3.48939311 38.3887325,7.38889656 41.2579739,12.9048 C33.5396152,13.8544138 27.660029,19.1884552 27.660029,25.7145931 C27.660029,28.2806069 28.528829,30.604138 30.0441807,32.5640111 C27.8822773,33.1903573 25.5385531,33.5338387 23.0735462,33.5338387 C22.6694773,33.5338387 22.0431187,33.5136332 21.2349393,33.4934276 C20.3863324,33.4934276 19.7397807,33.7560911 18.9719876,34.3622318 C16.486829,36.160455 12.8903876,38.3829766 11.0517393,39.1305518 C10.8901117,39.1911642 10.8294911,39.0699394 10.9304979,38.9285049 Z"/>
<path d="M43.5205946,35.5745173 C36.5299325,35.5745173 30.7311601,31.1698759 30.7311601,25.7145931 C30.7311601,20.2593104 36.5299325,15.8546897 43.7229394,15.8546897 C50.8956291,15.8546897 56.6941118,20.2593104 56.6941118,25.7145931 C56.6941118,29.3918483 54.6334222,32.1397118 50.4913532,34.079367 C49.6223877,34.4632552 49.1779739,35.271447 49.6223877,36.2614784 C50.0266635,37.1504856 50.5923187,38.1405187 51.2390773,38.9082994 C51.3603187,39.0093228 51.2792153,39.1103463 51.1381118,39.0295283 C49.8247325,38.3021587 48.0263877,37.1908966 46.5714911,36.1806596 C45.9251463,35.7159505 45.379767,35.5341079 44.7735601,35.5341079 C44.3490083,35.5543126 43.9451463,35.5745173 43.5205946,35.5745173 Z"></path>
</g>
</svg>
<!-- end snippet -->
请注意，我添加了 stroke="blue"，否则两个对话框会相距太远。
英文:
I've split the d attribute between 2 paths and I've deleted the first part of the d attribute since it was an outline of both speech bubbles.
This is the result:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="250px" height="250px" viewBox="0 0 64 64">
<g transform="translate(2 10.69)" fill="blue" stroke="blue" >
<path d="M10.9304979,38.9285049 C12.0619738,37.534378 13.6783324,35.4330828 14.3653117,34.1399794 C14.9310497,33.0893338 14.7896152,32.1599173 13.4965117,31.5537932 C7.15223587,28.6038621 3.5153669,23.8961794 3.5153669,18.5217104 C3.5153669,10.2377793 12.1832152,3.48939311 23.0735462,3.48939311 C31.3777118,3.48939311 38.3887325,7.38889656 41.2579739,12.9048 C33.5396152,13.8544138 27.660029,19.1884552 27.660029,25.7145931 C27.660029,28.2806069 28.528829,30.604138 30.0441807,32.5640111 C27.8822773,33.1903573 25.5385531,33.5338387 23.0735462,33.5338387 C22.6694773,33.5338387 22.0431187,33.5136332 21.2349393,33.4934276 C20.3863324,33.4934276 19.7397807,33.7560911 18.9719876,34.3622318 C16.486829,36.160455 12.8903876,38.3829766 11.0517393,39.1305518 C10.8901117,39.1911642 10.8294911,39.0699394 10.9304979,38.9285049 Z"/>
<path d="M43.5205946,35.5745173 C36.5299325,35.5745173 30.7311601,31.1698759 30.7311601,25.7145931 C30.7311601,20.2593104 36.5299325,15.8546897 43.7229394,15.8546897 C50.8956291,15.8546897 56.6941118,20.2593104 56.6941118,25.7145931 C56.6941118,29.3918483 54.6334222,32.1397118 50.4913532,34.079367 C49.6223877,34.4632552 49.1779739,35.271447 49.6223877,36.2614784 C50.0266635,37.1504856 50.5923187,38.1405187 51.2390773,38.9082994 C51.3603187,39.0093228 51.2792153,39.1103463 51.1381118,39.0295283 C49.8247325,38.3021587 48.0263877,37.1908966 46.5714911,36.1806596 C45.9251463,35.7159505 45.379767,35.5341079 44.7735601,35.5341079 C44.3490083,35.5543126 43.9451463,35.5745173 43.5205946,35.5745173 Z" ></path>
</g>
</svg>
<!-- end snippet -->
Please observe that I've added a stroke="blue" since otherwise the two speech bubbles were too far apart.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论