我是SVG的新手.我有聊天SVG图标,我需要填充蓝色.通过填充,我需要在这两个聊天符号之间的空格(空白空格)周围用白色轮廓填充.

通过查看一些参考资料,我开始了解填充、笔划属性.在应用这些之后,它只是改变了黑色边框的 colored颜色 .所以我在谷歌上搜索了一下,发现了这个(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.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>

这就是我到目前为止所能做的.

<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>

寻找这样的最终结果:

enter image description here

有谁能帮帮我吗?

另外,请让我们知道删除d属性的某些部分是否是正确的方法.

推荐答案

我将d属性拆分到两个路径中,并且删除了d属性的第一部分,因为它是两个语音气泡的轮廓. 这就是结果:

<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>

请注意,我已经添加了stroke="blue",否则两个演讲气泡会相距太远.

Html相关问答推荐

自动字间距以适应行CSS

容器内的SVG图像没有响应

使用无限数量的元素创建特定的CSS网格

如何使用html和css关键帧创建动画

有没有一种方法可以很容易地将这个div从底部:0转换到顶部:0?

从html文件中提取元素的Python BeautifulSoup

Swift WkMessageHandler 消息不发送

在显示 swift ui 之前加载下一个 YouTube 视频

当多个a元素用作目标时的:target伪类

从触发元素移动到有间隙的内容时 CSS 工具提示关闭

如何影响 HTML 元素的哪些子元素导致其增长,哪些不增长?

Tailwind 网格行高度可防止拉伸到最高行的所有相同高度

在Firefox中使用keySplines时,SVG: <animateMotion>不起作用

发送带有图像的Google文档作为HTML格式的邮件正文不再起作用

CSS 网格跨度行到所有行

如何让一个 div 元素粘在另一个元素上?

如何制作一个布局,其中左侧固定为图像,右侧为按钮,中心或中间位置为文本?

在身体外部创建 tanget 45° div

如何让 backdrop-filter: blur() 效果在 iOS 上运行?

如何使用 CSS Flex 设计一个导航栏,其中一组项目左对齐而另一组项目右对齐?