zoukankan      html  css  js  c++  java
  • svg蒙版mask

    无障碍的使用蒙版的前提。

    1. svg的图层是按代码顺序先的处于底层。后出现的处于表层。表层会遮盖底层。
    2. 蒙版相当于白名单机制与黑名单机制。白名单就是默认不透明,只允许我的形状覆盖的区域(fill=(white))。黑名单就是默认透明,我的形状覆盖的区域则是不透明(fill="black")。

    实例:对图片只显示某个区域。用白名单机制把想要显示的区域框出来。

      <svg xmlns="http://www.w3.org/2000/svg" :view-box.camel="viewbox">
          <defs>
              <mask id="small-rect">
                  <!--图形白名单(只显示形状内的内容)-->
                  <circle r='50' cx='50' cy='50' fill="white"/>
              </mask>
          </defs>
          <g>
              <!--对图形添加白名单效果-->
              <image mask="url(#small-rect)" y="0" x="0" height="100" width="100" xlink:href="https://www.baidu.com/img/bd_logo1.png"/>
              <!--给图标加个边框,不是必须,只是为了显示明显点-->
              <circle r='50' cx='50' cy='50' class="circle"/>
              <text x='0' y='120'>gcolo</text>
          </g>
      </svg>
  • 相关阅读:
    同舟共济
    MQTT客户端
    Emgucv安装及使用
    Go生成UUID
    Go语言使用百度翻译api
    Go压缩文件
    Go语言的标准net库使用
    Go文件操作
    Go语言获取本地IP地址
    禅道使用规范
  • 原文地址:https://www.cnblogs.com/-outman/p/12213181.html
Copyright © 2011-2022 走看看