Question

在此图像中，顶部是屏幕上的视图，而底部仅在使用SVG悬停在其上时看到。

我的SVG代码如下所示。

<svg width="164px" height="125px" viewBox="0 0 164 125" 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">
    <title>android-store</title>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="android-store-+-social-android-+-social-android-copy-2" sketch:type="MSLayerGroup">
            <g id="android" transform="translate(1.000000, 1.000000)">
                <rect id="Rectangle-4" stroke="#4CA141" sketch:type="MSShapeGroup" x="0" y="0" width="162" height="53" rx="2"></rect>
                <g id="Group" transform="translate(9.000000, 10.000000)" fill="#4CA141" sketch:type="MSShapeGroup">
                    <g transform="translate(0.000000, 9.630682)" id="Shape">
                        <path d="M5.45454545,7.875 L5.45454545,15.5113636 C5.45454545,16.0994318 5.83806818,16.7045455 6.42613636,16.7045455 L8.86363636,16.7045455 L8.86363636,21.1363636 C8.86363636,22.2698864 9.77556818,23.1818182 10.9090909,23.1818182 C12.0426136,23.1818182 12.9545455,22.2698864 12.9545455,21.1363636 L12.9545455,16.7045455 L17.1306818,16.7045455 L17.1306818,21.1363636 C17.1306818,21.7755682 17.4204545,22.3465909 17.8806818,22.7215909 C18.2130682,23.0113636 18.65625,23.1818182 19.1335227,23.1818182 L19.1590909,23.1818182 L19.1761364,23.1818182 C20.3096591,23.1818182 21.2215909,22.2698864 21.2215909,21.1363636 L21.2215909,16.7045455 L23.5738636,16.7045455 C24.1704545,16.7045455 24.5454545,16.0994318 24.5454545,15.5198864 L24.5454545,7.88352273 L24.5454545,1.36363636 L5.45454545,1.36363636 L5.45454545,7.875 L5.45454545,7.875 Z"></path>
                        <path d="M27.9545455,0 C26.8210227,0 25.9090909,0.911931818 25.9090909,2.04545455 L25.9090909,10.2272727 C25.9090909,11.3607955 26.8210227,12.2727273 27.9545455,12.2727273 C29.0880682,12.2727273 30,11.3607955 30,10.2272727 L30,2.04545455 C30,0.911931818 29.0880682,0 27.9545455,0 L27.9545455,0 Z"></path>
                        <path d="M2.04545455,0 C0.911931818,0 0,0.911931818 0,2.04545455 L0,10.2272727 C0,11.3607955 0.911931818,12.2727273 2.04545455,12.2727273 C3.17897727,12.2727273 4.09090909,11.3607955 4.09090909,10.2272727 L4.09090909,2.04545455 C4.09090909,0.911931818 3.17897727,0 2.04545455,0 L2.04545455,0 Z"></path>
                    </g>
                    <path d="M19.7045455,2.22443182 L21.28125,0.357954545 C21.3153409,0.315340909 21.2642045,0.221590909 21.1704545,0.144886364 C21.0767045,0.0767045455 20.9659091,0.0596590909 20.9403409,0.110795455 L19.3039773,2.05397727 C18.1448864,1.59375 16.7301136,1.30397727 14.9914773,1.30397727 C13.2443182,1.29545455 11.8210227,1.57670455 10.6619318,2.02840909 L9.04261364,0.119318182 C9.00852273,0.0767045455 8.90625,0.0852272727 8.8125,0.153409091 C8.71875,0.221590909 8.66761364,0.306818182 8.70170455,0.366477273 L10.2613636,2.20738636 C6.15340909,3.98863636 5.53977273,8.36079545 5.45454545,9.63920455 L24.5113636,9.63920455 C24.4346591,8.35227273 23.8295455,4.03977273 19.7045455,2.22443182 L19.7045455,2.22443182 Z M11.65625,7.20170455 C11.1081019,7.20170455 10.65625,6.75057673 10.65625,6.20170455 C10.65625,5.65283237 11.1006944,5.20170455 11.65625,5.20170455 C12.2043981,5.20170455 12.65625,5.65283237 12.65625,6.20170455 C12.65625,6.75057673 12.2118056,7.20170455 11.65625,7.20170455 L11.65625,7.20170455 Z M18.0426136,7.20170455 C17.4944655,7.20170455 17.0426136,6.75057673 17.0426136,6.20170455 C17.0426136,5.65283237 17.4870581,5.20170455 18.0426136,5.20170455 C18.5907618,5.20170455 19.0426136,5.65283237 19.0426136,6.20170455 C19.0426136,6.75057673 18.5907618,7.20170455 18.0426136,7.20170455 L18.0426136,7.20170455 Z" id="Shape"></path>
                </g>
                <g id="Available-on-+-Android-Store" transform="translate(50.000000, 9.000000)" font-family="Open Sans, sans-serif" fill="#4CA141" sketch:type="MSTextLayer" font-weight="normal">
                    <text id="Available-on" font-size="10">
                        <tspan x="0" y="11">Available on</tspan>
                    </text>
                    <text id="Android-Store" font-size="16">
                        <tspan x="0" y="31">Android Store</tspan>
                    </text>
                </g>
            </g>

            <use x="1" y="71" xlink:href="#android" style=""/>

        </g>
    </g>
</svg>

现在从上面的代码中，顶部图像是重复的，但在此我重复了整个被覆盖的元素，其中id =＆＃34; android＆＃34;。但你可以看到重复的图像，我想改变子元素的颜色。

另一件事是我想将其用作背景图像，因此请不要将代码建议为内联SVG工作。

当有＆＃34;使用＆＃34;时改变子元素的颜色。 SVG中的元素

0 个答案: