SVG：如何为整个图像着色

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>

如您所见-仅路径（图像的“边界”）是彩色的。 但是，我需要用特定的颜色填充整个图像（也应在“内部”将其着色）。 我是svg的新手，能否请您告诉我为整个图像着色需要做什么？

Answer 1

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

在这里您可以看到：

• 第一个svg ，与您在Illustrator中编辑以修改路径的一样。
• 第二个是使用笔触重新创建的svg而不是将其转换为形状。 它允许您控制stroke和通过css的fill （在我的示例中）。

Answer 2

您的图标包含两个路径。 一是相机的机身。 另一个形成“镜头”。

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

因此，例如，第一个路径是相机“ body”。 这是它的路径定义：

# 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

每个子路径均以“ M”（移动）开头，并以“ z”（闭合路径）结束。

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

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

您可以选择使用Illustrator图形化编辑文件，也可以像我一样手动进行编辑。 但是请注意，并非所有文件都像手动修改文件那样简单。