如何在这个单一矢量图形中填充颜色答案

【问题标题】：How to fill color in this Single Vector Graphic如何在这个单一矢量图形中填充颜色
【发布时间】：2015-11-22 01:38:47
【问题描述】：

所以我有这个 SVG

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="49px" height="55px" viewBox="0 0 49 55" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <!-- Generator: sketchtool 3.4 (356) - http://www.bohemiancoding.com/sketch -->
    <title>Gender Neutral User-100</title>
    <desc>Created with sketchtool.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="#ff0000" color="#ff0000" sketch:type="MSPage">
        <g id="Social-Activity" sketch:type="MSArtboardGroup" fill="#ff0000" transform="translate(-347.000000, -337.000000)">
            <image fill="#ff0000" id="Gender-Neutral-User-100" sketch:type="MSBitmapLayer" x="333" y="326" width="77" height="77" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABGdBTUEAA1teXP8meAAABR5JREFUeAHtXItx20YUlD0pACVcB2YHvg7MDowOnHSgVBB2IHQQpgLDFUgdEB0YHTi7mWiGhrGHjw6HO/LtzLPIO9zbzwMoyTP2w4PBErAELAFLwBKwBCwBS8ASsAQsAUvAErAELAFLwBKwBCwBS8ASsAQiJ/Aucr+U7SqQfRCE38S6LUdMgAP4jHpCXVA/JorX8NrPKJ41RErAoQ+D/fHGYg+HMqxMwOFcjEEMB2mDWTGQLzjzHTUMM9Z79iaHYSIBftb/jYoV/FQfctn3FzEUBvOccBivwyKnDWUwlCXD6HC2QR1RDjWEwwL3GlSHeg0+9NWGgqCuMefJ6HCAQS8Fz3So0EC4Rw0GJHBChcLqsf97hKTYg71CXKcIPEW38BMBddg/oGKBvTpUaCge+3eLC5yrcF6wV22QDHuyt+KlprtEDdcqlB57DrUVHBqTQ/HX2Ls78E5UgfgEaZBD8VPbXaGGWxVGkzAJcikddUIdu1OdA0G4hOrIpQZCjXcDFcJphwTIqfQkl/M+OePDgw9w7nFXtgE9Ia2BY2VtPULu2B3Z72iD3GOaqDUp9nhCDsLhi1hPsay4XQrya449BlJdC7h63V69Tv1ScbvUQvYYSGqPRfHZQDIblw3EBpJZApnJ2eMJ6UUGXqynWFbcSutmmvYYiPoR88NmLqcbK26ldbpjQVd4aB37JYxr3EuNIwiz0ZPTE8JBMJzU8AHCu3hC6P+MUnel4wWJ4MCjdFDj3aCGUxVEkzAFcikddUIdWVB1UKHC8AkUkkPxdwn4s6OooUgF8h17DrUVDmhMDsVfb0Wce98OAlUoz9irNjDAnuyteLsNOItp6aFUBcP1C4p3cyxMPRnk9LHISu1zgvDQUPjR8iWCOfZgrxAXtRiQQIsKBcW9C+qIWgqe4dmp/u3Sxrd8fQVzL6ip0LjPu/wJ9QnlUEM4LHCP10w9Ea985KYGw1UCS4byGmSMrzaMqyEMX3IoZ1SMoOf0IBc5DRMJnLA/J9C3XEMOw0QCDvtPqLcEveQsuchpGCTg8D7lIIZDs8FcDeSI13N/GhoGGfM9NVDLrni3I3sF7r9Q9QoN33Cm+7/Gjjsssj6ilqLBgT9Q/dKDJV9/gPgLau4d3uHaE8qjlsLjAM92qLl81EaNdwEanfsRdca1PmIq7NWi5gyGGm9+KHOHwdAcais4NG5RU4O56aHMGUaPkI6oVCAXOUODucmhVDDNz+WQ8Rb7vC41yNmiQtqofQ9toN0GX9E2ZLjZhnZRV2oIaaSHm8AJLkJGuZ8LprQ+5iJ0rQ6Pg6FhNGsbb3iOmkKa/Ybcm7fmY67MnTdnX09AbUo3PRWJGqqVqQ57FSpXUFuHUvpr7BUFGrqglKFDAW6oUemnN3osBjWUKjOnYlyE/+soeiwGz1A6NpAe6yXdWdRKzWNe6LEIHKByzADXHotw8LNIalZ+6DV7NFA4ZoB3WpW9+l8FUjO1j3lqfr08vxX+3U+x4kWcjfBEr1njAHVjw+DaMWvlYXHUrnzRc7aooWxMeJ+t4vnCxnxxrZ7fYvrK2P+kzQvKVqyXtPyPEOvF+qrl2AP5KFS8iPWSlpUH5XmVt9gDcUKFMiMuz3JZeVCeV5mIPRAlolMbBa33BWn9T2qFP9U3vtK8KL3KH71HQcwn5BBFUZlNonn/LaL/Dr3+jNgvx1bKH70bLAFLwBKwBCwBS8ASsAQsAUvAErAELAFLwBKwBCwBS8ASsAQsAUsgzwT+BZbK0P7I4pEAAAAAAElFTkSuQmCC"></image>
        </g>
    </g>
</svg>

看起来像

我想用CSS在里面填充一些颜色

但不知道怎么做。尝试了fill 属性，但没有成功。

这是fiddle 的SVG 代码。

我正在使用<object>...</object> 标签将这个SVG 嵌入到我的html 中。

【问题讨论】：

标签： css svg

【解决方案1】：

所包含图像的位图性质违背了 svg 的基本矢量图形方法。

一种选择是将图像与 svg 绘图原语结合起来：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="49px" height="55px" viewBox="0 0 49 55" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <!-- Generator: sketchtool 3.4 (356) - http://www.bohemiancoding.com/sketch -->
    <title>Gender Neutral User-100</title>
    <desc>Created with sketchtool.</desc>
    <defs>
        <style type="text/css"><![CDATA[
          .filler {
            color: #ff0000;
            fill: #ccccff;
            stroke: none;
            stroke-width: 1
          }
        ]]></style>
    </defs>
    <circle cx="25" cy="18" r="12" class="filler"/>
    <circle cx="25" cy="55" r="20" class="filler"/>
    <g id="Page-1" sketch:type="MSPage">
        <g id="Social-Activity" sketch:type="MSArtboardGroup" transform="translate(-347.000000, -337.000000)">
            <image id="Gender-Neutral-User-100" sketch:type="MSBitmapLayer" x="333" y="326" width="77" height="77" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABGdBTUEAA1teXP8meAAABR5JREFUeAHtXItx20YUlD0pACVcB2YHvg7MDowOnHSgVBB2IHQQpgLDFUgdEB0YHTi7mWiGhrGHjw6HO/LtzLPIO9zbzwMoyTP2w4PBErAELAFLwBKwBCwBS8ASsAQsAUvAErAELAFLwBKwBCwBS8ASsAQiJ/Aucr+U7SqQfRCE38S6LUdMgAP4jHpCXVA/JorX8NrPKJ41RErAoQ+D/fHGYg+HMqxMwOFcjEEMB2mDWTGQLzjzHTUMM9Z79iaHYSIBftb/jYoV/FQfctn3FzEUBvOccBivwyKnDWUwlCXD6HC2QR1RDjWEwwL3GlSHeg0+9NWGgqCuMefJ6HCAQS8Fz3So0EC4Rw0GJHBChcLqsf97hKTYg71CXKcIPEW38BMBddg/oGKBvTpUaCge+3eLC5yrcF6wV22QDHuyt+KlprtEDdcqlB57DrUVHBqTQ/HX2Ls78E5UgfgEaZBD8VPbXaGGWxVGkzAJcikddUIdu1OdA0G4hOrIpQZCjXcDFcJphwTIqfQkl/M+OePDgw9w7nFXtgE9Ia2BY2VtPULu2B3Z72iD3GOaqDUp9nhCDsLhi1hPsay4XQrya449BlJdC7h63V69Tv1ScbvUQvYYSGqPRfHZQDIblw3EBpJZApnJ2eMJ6UUGXqynWFbcSutmmvYYiPoR88NmLqcbK26ldbpjQVd4aB37JYxr3EuNIwiz0ZPTE8JBMJzU8AHCu3hC6P+MUnel4wWJ4MCjdFDj3aCGUxVEkzAFcikddUIdWVB1UKHC8AkUkkPxdwn4s6OooUgF8h17DrUVDmhMDsVfb0Wce98OAlUoz9irNjDAnuyteLsNOItp6aFUBcP1C4p3cyxMPRnk9LHISu1zgvDQUPjR8iWCOfZgrxAXtRiQQIsKBcW9C+qIWgqe4dmp/u3Sxrd8fQVzL6ip0LjPu/wJ9QnlUEM4LHCP10w9Ea985KYGw1UCS4byGmSMrzaMqyEMX3IoZ1SMoOf0IBc5DRMJnLA/J9C3XEMOw0QCDvtPqLcEveQsuchpGCTg8D7lIIZDs8FcDeSI13N/GhoGGfM9NVDLrni3I3sF7r9Q9QoN33Cm+7/Gjjsssj6ilqLBgT9Q/dKDJV9/gPgLau4d3uHaE8qjlsLjAM92qLl81EaNdwEanfsRdca1PmIq7NWi5gyGGm9+KHOHwdAcais4NG5RU4O56aHMGUaPkI6oVCAXOUODucmhVDDNz+WQ8Rb7vC41yNmiQtqofQ9toN0GX9E2ZLjZhnZRV2oIaaSHm8AJLkJGuZ8LprQ+5iJ0rQ6Pg6FhNGsbb3iOmkKa/Ybcm7fmY67MnTdnX09AbUo3PRWJGqqVqQ57FSpXUFuHUvpr7BUFGrqglKFDAW6oUemnN3osBjWUKjOnYlyE/+soeiwGz1A6NpAe6yXdWdRKzWNe6LEIHKByzADXHotw8LNIalZ+6DV7NFA4ZoB3WpW9+l8FUjO1j3lqfr08vxX+3U+x4kWcjfBEr1njAHVjw+DaMWvlYXHUrnzRc7aooWxMeJ+t4vnCxnxxrZ7fYvrK2P+kzQvKVqyXtPyPEOvF+qrl2AP5KFS8iPWSlpUH5XmVt9gDcUKFMiMuz3JZeVCeV5mIPRAlolMbBa33BWn9T2qFP9U3vtK8KL3KH71HQcwn5BBFUZlNonn/LaL/Dr3+jNgvx1bKH70bLAFLwBKwBCwBS8ASsAQsAUvAErAELAFLwBKwBCwBS8ASsAQsAUsgzwT+BZbK0P7I4pEAAAAAAElFTkSuQmCC"></image>
        </g>
    </g>
</svg>

已从 g 和 image 元素中删除了多余的属性。代码为this fiddle。

【讨论】：