fill与图标的批量颜色控制示意实例页面

展示

代码

• HTML：

  <svg style="display:none;">
      <symbol id="icon-circle" viewBox="0 0 150 150"><circle cx="75" cy="75" r="60"></circle></symbol>
      <symbol id="icon-rect" viewBox="0 0 150 150"><rect x="10" y="25" width="130" height="100"></rect><symbol>
      <symbol id="icon-ellipse" viewBox="0 0 150 150"><ellipse cx="75" cy="75" rx="65" ry="50"></ellipse></symbol>
      <symbol id="icon-diamond" viewBox="0 0 150 150"><path d="M75 10L140 75L75 140L10 75"></symbol>
  </svg>
  
  <h4 class="fill">深红色</h4>
  <p style="color: darkred;">
      <svg><use href="#icon-circle"></use></svg>圆形
      <svg><use href="#icon-rect"></use></svg>矩形
      <svg><use href="#icon-ellipse"></use></svg>椭圆
      <svg><use href="#icon-diamond"></use></svg>棱形
  </p>
  <h4 class="fill">绿色</h4>
  <p style="color: green;">
      // 同上
  </p>
  <h4 class="fill">深天蓝色</h4>
  <p style="color: deepskyblue;">
      // 同上
  </p>

• CSS：

  body {
      fill: currentColor;
  }
  p {
      font-size: 1.5rem;
  }
  svg {
      width: 1.25em; height: 1.25em;
      vertical-align: -.5ex;
  }