使用 CSS 类设置 SVG 图像样式

Question

我是 Svelte 的新手，想问一下是否有可能使用 CSS 类对作为 Svelte 组件导入的 SVG 图像设置样式？我有这样的代码：

<script lang="ts">
  import Logo from './assets/logo.svg';
  import Content from './components/Content.svelte';
</script>

<div class="main">
  <div class="logo">
    <Logo class="icon" />
  </div>
  <Content />
</div>

<style lang="scss">
  .main {
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
  }

  .logo {
    height: 144px;
  }

  .icon {
    margin: 50px auto 0;
  }
</style>

我收到警告：

Unused CSS selector ".icon"

是我做错了什么，还是它不能那样工作？

Answer 1

由于您的 svelte 组件中没有 .icon 元素，因此您需要使用 :global(...) modifier，例如 :global(.icon) { margin: 50px auto 0; }。但是，这会影响您应用的所有 .icon，因此将其范围限定为该组件的 .logo 元素中的所有 .icon：

<style lang="scss">
  .logo :global(.icon) { 
    margin: 50px auto 0; 
  }
</style>

Answer 2

由于您无法从 svg 代码外部使用 css 设置 svg 样式，因此您必须将样式嵌入 svg 代码中。您必须使用 <![CDATA[ your styles here ]]> 来防止某些回退。所以您的徽标将如下所示：

    <svg width="100%" height="100%" viewBox="0 0 140 64" xmlns="http://www.w3.org/2000/svg">
    <style><![CDATA[.first{ stroke:none; fill:red; } .second{ stroke:none; fill:green; } .third{ stroke:none; fill:blue; }]]></style>
        <path class="first" d="M30.262 57.02L7.195 40.723c-5.84-3.976-7.56-12.06-3.842-18.063 3.715-6 11.467-7.65 17.306-3.68l4.52 3.76 2.6-5.274c3.717-6.002 11.47-7.65 17.305-3.68 5.84 3.97 7.56 12.054 3.842 18.062L34.49 56.118c-.897 1.512-2.793 1.915-4.228.9z"/>
        <path class="second" d="M105.512 56.12l-14.44-24.272c-3.716-6.008-1.996-14.093 3.843-18.062 5.835-3.97 13.588-2.322 17.306 3.68l2.6 5.274 4.52-3.76c5.84-3.97 13.592-2.32 17.307 3.68 3.718 6.003 1.998 14.088-3.842 18.064L109.74 57.02c-1.434 1.014-3.33.61-4.228-.9z"/>
        <path class="third" d="M67.408 57.834l-23.01-24.98c-5.864-6.15-5.864-16.108 0-22.248 5.86-6.14 15.37-6.14 21.234 0L70 16.168l4.368-5.562c5.863-6.14 15.375-6.14 21.235 0 5.863 6.14 5.863 16.098 0 22.247l-23.007 24.98c-1.43 1.556-3.757 1.556-5.188 0z"/>
    </svg>

使用 CSS 类设置 SVG 图像样式

Styling SVG images using CSS classes

svg

sass

svelte

使用 CSS 类 设置 SVG 图像样式

Styling SVG images using CSS classes

svg

sass

svelte

使用 CSS 类设置 SVG 图像样式