css - 向 svg 添加填充

标签 css vector svg

我正在尝试制作一个带有黑色轮廓的白云图标。我正在走这条路:

<svg x="0" y="0" width="512" height="512" viewBox="0 0 512 512" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
  <path fill="#1D1D1B" d="M400,160c-5.312,0-10.562,0.375-15.792,1.125C354.334,120.417,307.188,96,256,96c-51.188,0-98.312,24.417-128.208,65.125c-5.23-0.75-10.48-1.125-15.792-1.125C50.25,160,0,210.25,0,272s50.25,112,112,112c13.688,0,27.084-2.5,39.709-7.333C180.666,401.917,217.5,416,256,416c38.542,0,75.333-14.083,104.291-39.333C372.916,381.5,386.312,384,400,384c61.75,0,112-50.25,112-112S461.75,160,400,160z M400,352c-17.125,0-32.916-5.5-45.938-14.667C330.584,365.624,295.624,384,256,384c-39.625,0-74.584-18.376-98.062-46.667C144.938,346.5,129.125,352,112,352c-44.188,0-80-35.812-80-80c0-44.188,35.812-80,80-80c10.812,0,21.062,2.208,30.438,6.083C163.667,156.667,206.291,128,256,128s92.334,28.667,113.541,70.083C378.938,194.208,389.209,192,400,192c44.188,0,80,35.812,80,80C480,316.188,444.188,352,400,352z"/>
</svg>

我似乎无法更改填充,但也许路径本身会留下一个空心,就像一个 donut 。

我怎样才能用白色填充这个云?

最佳答案

您将路径定义为外边界加内边界,路径的内部实际上是云的可感知边界,并且填充了您的#1D1D1B 颜色。

我能想到的最简单的解决方案是再添加一个只有内部边框的云形状,然后用您想要的任何颜色填充第二个云:http://jsfiddle.net/JJJmC/

<path fill="#1D1D1B" d="M400,160c-5.312,0-10.562,0.375-15.792,1.125C354.334,120.417,307.188,96,256,96c-51.188,0-98.312,24.417-128.208,65.125c-5.23-0.75-10.48-1.125-15.792-1.125C50.25,160,0,210.25,0,272s50.25,112,112,112c13.688,0,27.084-2.5,39.709-7.333C180.666,401.917,217.5,416,256,416c38.542,0,75.333-14.083,104.291-39.333C372.916,381.5,386.312,384,400,384c61.75,0,112-50.25,112-112S461.75,160,400,160z M400,352c-17.125,0-32.916-5.5-45.938-14.667C330.584,365.624,295.624,384,256,384c-39.625,0-74.584-18.376-98.062-46.667C144.938,346.5,129.125,352,112,352c-44.188,0-80-35.812-80-80c0-44.188,35.812-80,80-80c10.812,0,21.062,2.208,30.438,6.083C163.667,156.667,206.291,128,256,128s92.334,28.667,113.541,70.083C378.938,194.208,389.209,192,400,192c44.188,0,80,35.812,80,80C480,316.188,444.188,352,400,352z"/>
<path fill="Pink" d="M400,352c-17.125,0-32.916-5.5-45.938-14.667C330.584,365.624,295.624,384,256,384c-39.625,0-74.584-18.376-98.062-46.667C144.938,346.5,129.125,352,112,352c-44.188,0-80-35.812-80-80c0-44.188,35.812-80,80-80c10.812,0,21.062,2.208,30.438,6.083C163.667,156.667,206.291,128,256,128s92.334,28.667,113.541,70.083C378.938,194.208,389.209,192,400,192c44.188,0,80,35.812,80,80C480,316.188,444.188,352,400,352z"/>
</svg>

关于css - 向 svg 添加填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16846541/

相关文章:

html - <img> 如何缩放到 sibling 的高度?

java - 将 vector 从 Matlab 传递到 Scala 类

c++ - 帮助解决错误 : ISO C++ forbids declaration of 'vector' with no type

c++ - 存储反转数据的 vector

javascript - 使用 SVG 从现有代码生成大的向上指向的三 Angular 形

java - 如何在 JavaFx 中设置 svgPath 的大小

javascript - SVG 不像传统的 DOM 那样工作吗?

css - 将两个 div 彼此对齐?铁轨

javascript - Chrome 调整大小事件和 getComputedStyle

css - 在 R 演示文稿中扩展 R 代码块的宽度