svg fill css变量

M18771556987

于 2024-05-29 10:43:37 发布

阅读量172

点赞数 3

文章标签： svg

本文链接：https://blog.csdn.net/weixin_36878452/article/details/139289051

版权


<svg width="39" height="16" viewBox="0 0 39 16" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect width="39" height="16" rx="3" fill="var(--el-color-primary)" fill-opacity="0.1"/>
  <g clip-path="url(#clip0_3604_60702)">
    <path d="M3.60608 11.2425L6.8487 11.6971V8.45449H3.60608V11.2425ZM3.60608 7.54535H6.8487V4.30273L3.60608 4.7573V7.54535ZM7.75784 3.84816V7.54535H12.3945V3.36328L7.75784 3.84816ZM7.75784 12.1517L12.3945 12.6366V8.45449H7.75784V12.1517Z" fill="var(--el-color-primary)"/>
  </g>
  <path d="M20.63 12.97H19.51L19.35 12.26C19.71 12.29 20.05 12.31 20.38 12.31C20.62 12.31 20.75 12.18 20.75 11.94V9.49C19.79 9.55 18.75 9.61 17.62 9.66L17.42 9.02C17.65 9 17.86 8.95 18.05 8.89C18.87 8.53 19.79 7.97 20.81 7.21C19.94 7.28 19 7.34 18 7.4L17.85 6.76C18.03 6.74 18.19 6.69 18.34 6.63C18.84 6.38 19.43 5.89 20.11 5.15C19.26 5.19 18.36 5.21 17.4 5.21L17.19 4.58C20.06 4.58 22.45 4.37 24.35 3.95L24.7 4.56C23.66 4.8 22.44 4.98 21.02 5.09C20.4 5.81 19.77 6.37 19.13 6.79C19.93 6.75 20.74 6.69 21.56 6.62C22.01 6.26 22.47 5.86 22.95 5.43L23.61 5.76C21.92 7.25 20.45 8.32 19.19 8.98C20.82 8.89 22.22 8.78 23.38 8.64C23.13 8.32 22.87 7.99 22.6 7.67L23.14 7.34C23.96 8.3 24.59 9.13 25.03 9.84L24.45 10.25C24.26 9.91 24.04 9.57 23.8 9.22C23.11 9.3 22.34 9.37 21.48 9.44V12.12C21.48 12.68 21.19 12.97 20.63 12.97ZM22.85 10.05C23.86 10.78 24.7 11.51 25.38 12.25L24.87 12.76C24.26 12.06 23.43 11.31 22.37 10.51L22.85 10.05ZM19.04 10.12L19.55 10.57C18.87 11.39 18.03 12.1 17.03 12.71L16.58 12.13C17.56 11.55 18.38 10.88 19.04 10.12ZM29.82 10.72V11.41C28.9 11.87 27.86 12.25 26.7 12.53L26.61 11.81C27.83 11.54 28.9 11.18 29.82 10.72ZM28.22 3.81L28.91 4.09C28.41 5.37 27.9 6.39 27.38 7.15C27.82 7.09 28.26 7.01 28.7 6.93C28.88 6.59 29.06 6.24 29.25 5.86L29.9 6.11C29.02 7.77 28.29 8.96 27.71 9.68C28.41 9.5 29.11 9.26 29.82 8.95V9.62C28.77 10.06 27.76 10.35 26.8 10.51L26.6 9.85C26.73 9.79 26.84 9.71 26.93 9.63C27.31 9.23 27.78 8.56 28.33 7.6C27.79 7.7 27.24 7.8 26.69 7.88L26.5 7.22C26.62 7.17 26.72 7.08 26.82 6.94C27.36 6.03 27.82 4.99 28.22 3.81ZM30.16 8.2L30 7.56C30.06 7.54 30.1 7.52 30.14 7.51C30.48 7.26 30.91 6.62 31.45 5.58H29.74V4.89H32.29C32.15 4.51 32 4.17 31.84 3.86L32.57 3.74C32.72 4.08 32.87 4.47 33.01 4.89H35.26V5.58H32.2C31.76 6.45 31.37 7.08 31.03 7.48C31.96 7.4 32.89 7.29 33.81 7.14C33.59 6.82 33.35 6.49 33.1 6.17L33.65 5.83C34.33 6.7 34.86 7.46 35.23 8.12L34.67 8.51C34.53 8.25 34.38 8 34.21 7.74C32.97 7.94 31.62 8.09 30.16 8.2ZM30.97 8.61H31.67C31.62 9.87 31.46 10.8 31.2 11.39C30.91 12.01 30.43 12.54 29.75 12.98L29.29 12.41C29.88 12.03 30.3 11.59 30.55 11.08C30.79 10.56 30.93 9.74 30.97 8.61ZM34.53 12.82H33.83C33.23 12.82 32.93 12.53 32.93 11.95V8.52H33.62V11.83C33.62 12.04 33.69 12.15 33.85 12.17H34.5C34.72 12.15 34.85 12.03 34.89 11.81C34.93 11.53 34.96 11.1 34.96 10.51L35.58 10.73C35.58 11.67 35.51 12.26 35.38 12.48C35.25 12.68 34.97 12.8 34.53 12.82Z" fill="var(--el-color-primary)"/>
  <defs>
    <clipPath id="clip0_3604_60702">
      <rect width="10" height="10" fill="white" transform="translate(3 3)"/>
    </clipPath>
  </defs>
</svg>