0 
    <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"有一些问题。

4

1 回答 1

0

对于 SVG，<path>需要使用 指定颜色stroke。但是 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>
于 2018-08-02T15:15:38.810 回答