css - 如何正确地将样式应用于 SVG 类？

Question

我有这个 SVG:

#lockSVG {
  display: block;
  width: 50px;
  height: 65px;
}

#lockSVG .lock-outer-line {
  stroke-dasharray: 20 !important;
}

#lockSVG .lock-circle {}

#lockSVG .lock-upper-line {}

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="lockSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 25 35" style="enable-background:new 0 0 25 35;" xml:space="preserve">
    <style type="text/css">
        .lock-outer-line {
            fill:none;
            stroke:#686868;
            stroke-width:2;
            stroke-linecap:round;
            stroke-linejoin:round;
            stroke-miterlimit:10;
        }
        .lock-circle {
            fill:none;
            stroke:#686868;
            stroke-width:2;
            stroke-linecap:round;
            stroke-miterlimit:10;
        }
        .lock-upper-line {
            fill:none;
            stroke:#686868;
            stroke-width:2;
            stroke-linecap:round;
            stroke-miterlimit:10;
        }
    </style>
    <path class="lock-outer-line" d="M4.4,13.5c-1.2,0.8-2,2.1-2,3.6v4c0,2.8,1.1,5.4,3.1,7.4c1.9,1.9,4.5,2.9,7.2,2.9c0.1,0,0.2,0,0.3,0
        c5.5-0.1,10-4.9,10-10.5v-3.8c0.1-1.8-0.9-3.3-2.4-4l-6.5-2.7c-0.8-0.3-1.8-0.4-2.6,0L10.1,11"/>
    <circle class="lock-circle" cx="12.7" cy="21.9" r="2.9"/>
    <path class="lock-upper-line" d="M7.1,15.1V9.9c0-3.1,2.5-5.6,5.6-5.6h0c3.1,0,5.6,2.5,5.6,5.6v8"/>
</svg>

我想设计/玩它的一些台词。片段中的代码有效，stroke-dasharray: 20 !important;部分已渲染，但在我这边，即使我要粘贴 <style></style>在 SVG 本身旁边，在它之后，甚至在我原来的 .css 中文件，它只是不生效。

我的标记是:<img id="lock" src="<?php echo esc_url( ../../lock_animatable.svg'); ?>"> ，所以我将我的 SVG 包装在 img 中标签。

我做错了什么？就像文档没有单独加载此 SVG 的 CSS。

Answer 1

我在将 CSS 声明添加到 SVG 文件时通常使用的标准语法是:

<defs>
<style type="text/css"><![CDATA[

[... STYLES HERE...]

]]></style>
</defs>

工作示例:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 25 35">

<defs>
<style type="text/css"><![CDATA[

svg {
  display: block;
  width: 50px;
  height: 65px;
}

.lock-outer-line {
  fill: none;
  stroke: #686868;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  animation: strokeDashArray 6s linear forwards;
}

@keyframes strokeDashArray {
  0% {stroke-dasharray: 0;}
  100% {stroke-dasharray: 20;}
}

.lock-circle {
  fill: none;
  stroke: #686868;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.lock-upper-line {
  fill: none;
  stroke: #686868;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

]]></style>
</defs>


<path class="lock-outer-line" d="M4.4,13.5c-1.2,0.8-2,2.1-2,3.6v4c0,2.8,1.1,5.4,3.1,7.4c1.9,1.9,4.5,2.9,7.2,2.9c0.1,0,0.2,0,0.3,0 c5.5-0.1,10-4.9,10-10.5v-3.8c0.1-1.8-0.9-3.3-2.4-4l-6.5-2.7c-0.8-0.3-1.8-0.4-2.6,0L10.1,11" />

<circle class="lock-circle" cx="12.7" cy="21.9" r="2.9" />

<path class="lock-upper-line" d="M7.1,15.1V9.9c0-3.1,2.5-5.6,5.6-5.6h0c3.1,0,5.6,2.5,5.6,5.6v8" />
</svg>