离子 SVG 样式表参考答案

【问题标题】：Ionic SVG stylesheet reference离子 SVG 样式表参考
【发布时间】：2018-03-29 10:45:52
【问题描述】：

当在对象标签中引用 SVG 元素时，您可以通过 CSS 将样式表链接放置在 SVG 文件中来操作它。我似乎无法让它工作。我正在放置：

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

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

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

【问题讨论】：

标签： css svg ionic3

【解决方案1】：

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

html文件夹->

digital.svg
css（文件夹）-> main.css

数字.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;
}

结果

【讨论】：

这很有帮助。通过指向@import url(../../build/main.css);我可以参考主要的CSS。但是，在页面 scss 文件中，我必须在页面流元素之外使用选择器才能使其工作。也值得注意；在 assets/css 中创建一个新的 css 文件并以建议的方式引用它。