mozilla
您的搜索结果

    mask

    这篇翻译不完整。请帮忙从英语翻译这篇文章

    在 SVG 中,你可以定义任意其他图形对象 或者 <g> 元素作为一个透明的遮罩层和当前元素合成.  mask 元素用于定义这样的遮罩层. 一个遮罩层引用mask元素属性.

    使用场景

    元素类型 容器元素
    允许的内容 可以以任意顺序包含以下内容:
    动画元素 »
    描述元素 »
    图形元素 »
    结构元素 »
    渐变元素 »
    <a>, <altGlyphDef>, <clipPath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>
    标准文档 SVG 1.1 (2nd Edition)

    示例

    源代码 运行结果
    <?xml version="1.0"?>
    <svg width="200" height="80" 
         viewBox="0 0 200 80" version="1.1"
         xmlns="http://www.w3.org/2000/svg" 
         xmlns:xlink="http://www.w3.org/1999/xlink">
    
        <defs>
            <mask id="myMask" maskUnits="userSpaceOnUse"
                  x="0" y="0" width="200" height="80">
                <rect x="0" y="0" width="100" height="80" fill="white"/>
            </mask>
    
            <text id="Text" x="100" y="48" 
                  font-size="26" font-weight="bold" text-anchor="middle">
                Black & White
            </text>
        </defs>
    
        <!-- Draw black rectangle in the background -->
        <rect x="100" y="10" width="95" height="60"  />
      
        <!-- Draw the text string twice. First, the white text without mask.
             Second, the black text with the mask applied-->
        <use xlink:href="#Text" fill="white"/>
        <use xlink:href="#Text" fill="black" mask="url(#myMask)"/>
    </svg>

    » mask.svg

    属性

    全局属性

    特征属性

    DOM 接口

    This element implements the SVGMaskElement interface.

    阅读更多:

    文档标签和贡献者

    此页面的贡献者有: fonglezen
    最后编辑者: fonglezen,