这是checkbox.html的当前HTML，位于angular / material2'mat-checkbox'组件内 .

<div class="mat-checkbox-background">
      <svg version="1.1"
           focusable="false"
           class="mat-checkbox-checkmark"
           viewBox="0 0 24 24"
           xml:space="preserve">
        <path class="mat-checkbox-checkmark-path"
              fill="none"
              stroke="white"
              d="M4.1,12.7 9,17.6 20.3,6.3"/>
      </svg>
      <!-- Element for rendering the indeterminate state checkbox. -->
      <div class="mat-checkbox-mixedmark"></div>
    </div>
</div>

基本上，我想要以下内容：禁用：加号未选中：加号检查：默认选中标记不确定：默认情况下当前默认

它现在的工作方式是在默认（未选中）状态下，复选标记设置为不透明度0;有什么办法，而不是仅仅改变不透明度，我可以有不同的SVG值吗？

我正在努力的挑战是，就目前而言，我需要使用'mat-checkbox'组件而不是仅创建自定义组件 . 这可能是一个选项，但它必须扩展mat-checkbox组件并使用它的所有现有功能（可访问性，观察者，不确定的状态管理等） . 我只是不知道Angular 5（2）在没有一些指导的情况下做得好 .

javascript angular svg angular-material