Question

这是我拥有的SVG图像：https://jsfiddle.net/hey0qvgk/3/

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" width="90" height="90" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 613.2 416" style="enable-background:new 0 0 613.2 416;" xml:space="preserve">
<style type="text/css">
    .video-svg{fill:#00648F;}
</style>
<g>
    <path id="video-svg" class="video-svg" d="M346.7,415.8H69c-38,0-69-30.9-69-69V69.1c0-38,30.9-68.9,69-68.9h277.8c38,0,69,30.9,69,68.9v277.7
        C415.7,384.9,384.8,415.8,346.7,415.8z M69,33.9c-19.4,0-35.2,15.8-35.2,35.2v277.7c0,19.4,15.8,35.2,35.2,35.2h277.8
        c19.4,0,35.2-15.8,35.2-35.2V69.1c0-19.4-15.8-35.2-35.2-35.2H69z"/>
    <path id="video-svg" class="video-svg" d="M596.3,354.1c-3.3,0-6.6-1-9.5-2.9l-115-78.1c-4.6-3.1-7.4-8.4-7.4-13.9V156.8c0-5.6,2.8-10.8,7.4-13.9
        l115-78.1c5.2-3.5,11.9-3.8,17.4-1c5.5,2.9,9,8.7,9,14.9v258.6c0,6.2-3.4,12-9,14.9C601.7,353.5,599,354.1,596.3,354.1z
         M498.2,250.2l81.3,55.2V110.5l-81.3,55.2V250.2z"/>
</g>
</svg>

正如您所看到的 - 只有路径（图像的＆＃34;边框和＃34;）是彩色的。但是，我需要用特定的颜色填充整个图像（它应该着色＆＃34;内部＆＃34;以及）。我是svg的新手 - 请你告诉我我要做什么来为整个图像上色？

Answer 1

您的svg路径将笔划转换为形状。

你可以看到

Here：

第一个svg，与您在Illustrator中编辑的修改路径相同。{/ li>
第二个是使用笔划重新创建的svg，而不是将其转换为形状。它允许您控制stroke和fill到css（在我的示例中）。

Answer 2

您的图标由两条路径组成。一个是相机的主体。另一个形成了＆＃34;镜头＆＃34;。

这两条路径中的每条路径都包含两个子路径。一个形成形状的外边缘，另一个形成内部（使内部透明的孔）。

例如，第一条路径是相机＆＃34; body＆＃34;。这是它的路径定义：

# the "outside"
M346.7,415.8H69c-38,0-69-30.9-69-69V69.1c0-38,30.9-68.9,69-68.9h277.8
c38,0,69,30.9,69,68.9v277.7C415.7,384.9,384.8,415.8,346.7,415.8z

# the "hole"
M69,33.9c-19.4,0-35.2,15.8-35.2,35.2v277.7c0,19.4,15.8,35.2,35.2,35.2
h277.8c19.4,0,35.2-15.8,35.2-35.2V69.1c0-19.4-15.8-35.2-35.2-35.2H69z

每个子路径都以＆＃39; M＆＃39; （移动）并以＆＃39; z＆＃39;结束。（关闭路径）。

对于此图标，形成孔的子路径是每个<path>元素中的第二个子路径。如果删除了两个孔子路径：

＆＃13;

<svg version="1.1" width="90" height="90" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 613.2 416" style="enable-background:new 0 0 613.2 416;" xml:space="preserve">
<style type="text/css">
	.video-svg{fill:#00648F;}
</style>
<g>
	<path id="video-svg" class="video-svg" d="M346.7,415.8H69c-38,0-69-30.9-69-69V69.1c0-38,30.9-68.9,69-68.9h277.8c38,0,69,30.9,69,68.9v277.7
		C415.7,384.9,384.8,415.8,346.7,415.8z"/>
	<path id="video-svg" class="video-svg" d="M596.3,354.1c-3.3,0-6.6-1-9.5-2.9l-115-78.1c-4.6-3.1-7.4-8.4-7.4-13.9V156.8c0-5.6,2.8-10.8,7.4-13.9
		l115-78.1c5.2-3.5,11.9-3.8,17.4-1c5.5,2.9,9,8.7,9,14.9v258.6c0,6.2-3.4,12-9,14.9C601.7,353.5,599,354.1,596.3,354.1z"/>
</g>
</svg>

＆＃13;

您可以选择使用Illustrator以图形方式编辑文件，也可以像我一样手动编辑文件。但请注意，并非所有文件都可以直接手动修改。

SVG：如何为整个图像着色

2 个答案: