SVG着色不能正常工作

时间:2017-02-28 12:47:06

标签: html css svg

我正在尝试为SVG图像着色,它在Firefox中正常工作,但在某些SVG中没有在Chrome中工作,我不知道为什么。

我用来为SVG着色的CSS:

.dashboard-block ul li .box .img svg path, 
.dashboard-block ul li .box .img svg { fill: <?=$color?> !important; stroke: <?=$color?> !important; }

HTML中的SVG行:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="70px" height="70px" viewBox="0 0 70 70" enable-background="new 0 0 70 70" xml:space="preserve"><use xlink:href="catalog/view/theme/<?php echo $template ?>/images/dashboard-icons1.svg#Layer_1"></use></svg>

到目前为止我尝试过:

  • 为SVG标记本身着色
  • 着色路径标记
  • 使SVG内联,这似乎有效,但对我来说似乎没有合适的解决方案

SVG文件:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                         width="70px" height="70px" viewBox="0 0 70 70" enable-background="new 0 0 70 70" xml:space="preserve">
<path fill="#006330" d="M54.61,26.135c-0.479-0.807-1.547-1.083-2.379-0.615l-17.143,9.579l-13.362-9.055
    c-0.788-0.535-1.875-0.347-2.424,0.414c-0.552,0.764-0.36,1.814,0.429,2.348l14.271,9.673c0.003,0.002,0.006,0.002,0.01,0.006
    c0.028,0.021,0.06,0.036,0.092,0.054c0.007,0.004,0.017,0.009,0.024,0.013c0.029,0.019,0.063,0.035,0.093,0.049
    c0.007,0.004,0.015,0.006,0.022,0.01c0.033,0.017,0.069,0.034,0.106,0.048c0.021,0.005,0.043,0.017,0.067,0.022
    c0.017,0.006,0.029,0.01,0.049,0.017c0.023,0.005,0.044,0.013,0.07,0.019c0.013,0.006,0.029,0.01,0.043,0.014
    c0.027,0.005,0.05,0.011,0.07,0.017c0.018,0.004,0.032,0.006,0.049,0.01c0.021,0.004,0.045,0.006,0.067,0.01
    c0.021,0.004,0.04,0.004,0.062,0.005c0.018,0.004,0.039,0.004,0.056,0.008c0.043,0.004,0.082,0.004,0.122,0.004
    c0.066,0,0.133-0.004,0.199-0.012h0.004c0.063-0.005,0.129-0.019,0.191-0.03c0.004,0,0.01-0.006,0.014-0.006
    c0.06-0.013,0.117-0.032,0.178-0.054c0.01-0.004,0.018-0.006,0.023-0.01c0.056-0.021,0.112-0.044,0.166-0.07
    c0.01-0.006,0.02-0.01,0.029-0.016c0.02-0.015,0.039-0.021,0.061-0.033l18.103-10.117c0.833-0.464,1.119-1.495,0.638-2.301V26.135z"
/>
                                        <path fill="none" stroke="#006330" stroke-width="2" stroke-miterlimit="10" d="M54.61,26.135c-0.479-0.807-1.547-1.083-2.379-0.615
    l-17.143,9.579l-13.362-9.055c-0.788-0.535-1.875-0.347-2.424,0.414c-0.552,0.764-0.36,1.814,0.429,2.348l14.271,9.673
    c0.003,0.002,0.006,0.002,0.01,0.006c0.028,0.021,0.06,0.036,0.092,0.054c0.007,0.004,0.017,0.009,0.024,0.013
    c0.029,0.019,0.063,0.035,0.093,0.049c0.007,0.004,0.015,0.006,0.022,0.01c0.033,0.017,0.069,0.034,0.106,0.048
    c0.021,0.005,0.043,0.017,0.067,0.022c0.017,0.006,0.029,0.01,0.049,0.017c0.023,0.005,0.044,0.013,0.07,0.019
    c0.013,0.006,0.029,0.01,0.043,0.014c0.027,0.005,0.05,0.011,0.07,0.017c0.018,0.004,0.032,0.006,0.049,0.01
    c0.021,0.004,0.045,0.006,0.067,0.01c0.021,0.004,0.04,0.004,0.062,0.005c0.018,0.004,0.039,0.004,0.056,0.008
    c0.043,0.004,0.082,0.004,0.122,0.004c0.066,0,0.133-0.004,0.199-0.012h0.004c0.063-0.005,0.129-0.019,0.191-0.03
    c0.004,0,0.01-0.006,0.014-0.006c0.06-0.013,0.117-0.032,0.178-0.054c0.01-0.004,0.018-0.006,0.023-0.01
    c0.056-0.021,0.112-0.044,0.166-0.07c0.01-0.006,0.02-0.01,0.029-0.016c0.02-0.015,0.039-0.021,0.061-0.033l18.103-10.117
    c0.833-0.464,1.119-1.495,0.638-2.301V26.135z"/>
                                        <path fill="#006330" d="M58.88,59.509c-0.041-0.04-0.08-0.077-0.123-0.109c6.027-6.01,9.345-13.909,9.345-22.305
    c0-8.559-3.442-16.601-9.692-22.653c-6.252-6.053-14.564-9.383-23.408-9.383c-8.842,0-17.151,3.333-23.402,9.383
    c-6.25,6.049-9.694,14.095-9.694,22.653c0,8.396,3.318,16.295,9.345,22.305c-0.041,0.032-0.082,0.069-0.121,0.109L4.16,66.254
    c-0.679,0.653-0.679,1.725,0,2.384c0.341,0.328,0.787,0.493,1.233,0.493c0.446,0,0.891-0.165,1.234-0.493l6.968-6.745
    c0.07-0.067,0.133-0.146,0.189-0.217c5.943,4.823,13.375,7.455,21.228,7.455s15.286-2.632,21.229-7.455
    c0.055,0.078,0.118,0.149,0.188,0.217l6.968,6.745c0.342,0.328,0.788,0.491,1.23,0.491c0.441,0,0.892-0.165,1.233-0.497
    c0.681-0.655,0.681-1.727,0-2.386l-6.969-6.745L58.88,59.509z M5.382,37.095c0-15.807,13.285-28.664,29.617-28.664
    c16.33,0,29.615,12.856,29.615,28.664c0,15.808-13.285,28.664-29.615,28.664C18.667,65.759,5.382,52.902,5.382,37.095"/>
                                        <path fill="none" stroke="#006330" stroke-width="2" stroke-miterlimit="10" d="M58.88,59.509c-0.041-0.04-0.08-0.077-0.123-0.109
    c6.027-6.01,9.345-13.909,9.345-22.305c0-8.559-3.442-16.601-9.692-22.653c-6.252-6.053-14.564-9.383-23.408-9.383
    c-8.842,0-17.151,3.333-23.402,9.383c-6.25,6.049-9.694,14.095-9.694,22.653c0,8.396,3.318,16.295,9.345,22.305
    c-0.041,0.032-0.082,0.069-0.121,0.109L4.16,66.254c-0.679,0.653-0.679,1.725,0,2.384c0.341,0.328,0.787,0.493,1.233,0.493
    c0.446,0,0.891-0.165,1.234-0.493l6.968-6.745c0.07-0.067,0.133-0.146,0.189-0.217c5.943,4.823,13.375,7.455,21.228,7.455
    s15.286-2.632,21.229-7.455c0.055,0.078,0.118,0.149,0.188,0.217l6.968,6.745c0.342,0.328,0.788,0.491,1.23,0.491
    c0.441,0,0.892-0.165,1.233-0.497c0.681-0.655,0.681-1.727,0-2.386l-6.969-6.745L58.88,59.509z M5.382,37.095
    c0-15.807,13.285-28.664,29.617-28.664c16.33,0,29.615,12.856,29.615,28.664c0,15.808-13.285,28.664-29.615,28.664
    C18.667,65.759,5.382,52.902,5.382,37.095z"/>
                                        <path fill="#006330" d="M3.85,17.218c-0.811,0-1.536-0.55-1.704-1.351c-0.164-0.781-0.247-1.578-0.247-2.377
    c0-6.508,5.469-11.803,12.195-11.803c1.442,0,2.856,0.243,4.198,0.718c0.901,0.32,1.365,1.287,1.035,2.166
    c-0.33,0.877-1.332,1.322-2.238,1.002c-0.957-0.343-1.969-0.514-3-0.514c-4.8,0-8.709,3.783-8.709,8.431
    c0,0.573,0.059,1.145,0.177,1.699c0.192,0.916-0.414,1.805-1.358,1.989C4.08,17.201,3.959,17.21,3.847,17.21L3.85,17.218z"/>
                                        <path fill="none" stroke="#006330" stroke-width="2" stroke-miterlimit="10" d="M3.85,17.218c-0.811,0-1.536-0.55-1.704-1.351
    c-0.164-0.781-0.247-1.578-0.247-2.377c0-6.508,5.469-11.803,12.195-11.803c1.442,0,2.856,0.243,4.198,0.718
    c0.901,0.32,1.365,1.287,1.035,2.166c-0.33,0.877-1.332,1.322-2.238,1.002c-0.957-0.343-1.969-0.514-3-0.514
    c-4.8,0-8.709,3.783-8.709,8.431c0,0.573,0.059,1.145,0.177,1.699c0.192,0.916-0.414,1.805-1.358,1.989
    C4.08,17.201,3.959,17.21,3.847,17.21L3.85,17.218z"/>
                                        <path fill="#006330" d="M66.147,17.218c-0.115,0-0.233-0.014-0.353-0.036c-0.944-0.185-1.55-1.078-1.358-1.989
    c0.118-0.558,0.178-1.127,0.178-1.7c0-4.651-3.909-8.431-8.711-8.431c-1.03,0-2.041,0.171-3,0.514
    c-0.902,0.319-1.906-0.128-2.236-1.005c-0.332-0.872,0.133-1.843,1.034-2.163c1.346-0.479,2.756-0.718,4.202-0.718
    c6.726,0,12.195,5.296,12.195,11.803c0,0.801-0.084,1.597-0.246,2.377C67.683,16.67,66.955,17.218,66.147,17.218"/>
                                        <path fill="none" stroke="#006330" stroke-width="2" stroke-miterlimit="10" d="M66.147,17.218c-0.115,0-0.233-0.014-0.353-0.036
    c-0.944-0.185-1.55-1.078-1.358-1.989c0.118-0.558,0.178-1.127,0.178-1.7c0-4.651-3.909-8.431-8.711-8.431
    c-1.03,0-2.041,0.171-3,0.514c-0.902,0.319-1.906-0.128-2.236-1.005c-0.332-0.872,0.133-1.843,1.034-2.163
    c1.346-0.479,2.756-0.718,4.202-0.718c6.726,0,12.195,5.296,12.195,11.803c0,0.801-0.084,1.597-0.246,2.377
    C67.683,16.67,66.955,17.218,66.147,17.218z"/>
</svg>

0 个答案:

没有答案
相关问题