如何使用svg文件而不是直接在markdown中使用svg元素从模板中绘制MDC复选框tickmark

Question

<div class="mdc-form-field">
<div class="mdc-checkbox">
<input type="checkbox"
id="my-checkbox"
class="mdc-checkbox__native-control"/>
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark"
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark__path"
fill="none"
stroke="white"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
<label for="my-checkbox">My Checkbox Label</label>
</div>

我试过类似的东西

<div class="mdc-form-field">
<div class="mdc-checkbox">
<input type="checkbox" name="meetings" id="checkbox-meeting-{{meeting.id}}" class="mdc-checkbox__native-control"
value="{{meeting.id}}"/>
<div class="mdc-checkbox__background">
<img src="{% static 'images/checkbox-tick.svg' %}" class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
<label id="checkbox-meeting-{{meeting.id}}-label"
for="checkbox-meeting-{{meeting.id}}" class="mdc-floating-label--float mdc-floating-label--float">
{{ meeting.date|date:'m/d/Y' }}</label>
</div>

我的svg文件看起来像

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
@import "@material/form-field/mdc-form-field";
@import "@material/checkbox/mdc-checkbox";
</style>
<path class="mdc-checkbox__checkmark-path"
fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
</svg>

因此，只填充复选框内的背景颜色，如预期的那样，从右下角到右上角的白色勾号不起作用/不可见。

欢迎提出建议。

我认为class="mdc-checkbox_checkmark-path">有一些问题。

Answer 1

对于SVG，需要使用stroke指定<path>颜色。但是CSS将使用color。

尝试将stroke设置为currentColor，这是一个特殊的颜色关键字，表示color的当前值。

<path class="mdc-checkbox__checkmark-path"
fill="none" stroke="currentColor" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>