Ionic SVG样式表参考

Question

在对象标记中引用SVG元素时，可以通过在SVG文件中放置样式表链接来通过CSS对其进行操作。我似乎无法让它发挥作用。我在放置：

<?xml-stylesheet type="text/css" href="build/main.css"?>

在SVG标记之前。我在与SVG对象所属页面相关联的SCSS文件中引用的元素上有一个类。我认为build/main.css可能不是SCSS编制的地方，但我在网上找不到任何好的信息。

那么如何在Ionic 3项目中的CSS中选择SVG的元素（最好不是内联）呢？

Answer 1

  

在我的情况下，我做了这个

html文件夹 - ＆gt;

• digital.svg
• css（文件夹） - ＆gt;的main.css

  

digital.svg

<svg id="Digital_svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96">
        <defs>
            <style>
                @import url(css/main.css);
            </style>
        </defs>
        <title>
            Digital
        </title>
        <path class="cls-1 last" d="M73,43.16A4.84,4.84,0,1,1,68.16,48,4.84,4.84,0,0,1,73,43.16m0-1A5.84,5.84,0,1,0,78.84,48,5.85,5.85,0,0,0,73,42.16Z"/>
        <path class="cls-1 first" d="M23,43.16A4.84,4.84,0,1,1,18.16,48,4.84,4.84,0,0,1,23,43.16m0-1A5.84,5.84,0,1,0,28.84,48,5.85,5.85,0,0,0,23,42.16Z"/>
        <circle class="cls-2 third" cx="61.67" cy="48" r="9.44"/>
        <path class="cls-1 secound" d="M45.67,34.72A13.28,13.28,0,1,1,32.39,48,13.3,13.3,0,0,1,45.67,34.72m0-2A15.28,15.28,0,1,0,61,48,15.28,15.28,0,0,0,45.67,32.72Z"/>
    </svg>

  

CSS / main.css的

.cls-1{
    fill:#333;
    }
.cls-2{fill:#2f86c9;}

svg {
    vertical-align: bottom; 
    width: 100%; 
    max-width: 100px !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: auto;
}

结果