zoukankan      html  css  js  c++  java
  • SVG裁剪和平移的顺序

    SVG 里为元素添加 clip-path 属性即可做出裁剪效果,添加 transfrom 属性可以平移、旋转元素。

    根据需求不同,有两种情况:

    1. 先裁剪元素,再把裁剪后的图形平移
    2. 先平移元素,再按区域裁剪图形

    先裁剪再平移

    在实际元素的位置添加clip-path属性,则是先裁剪。

    <defs>
        <clipPath id="myclip" clip-rule="evenodd">
            <rect x="0" y="0" width="200" height="200"/>
        </clipPath>
    </defs>
    
    <rect clip-path="url(#myclip)" x="100" y="100" width="300" height="300" fill="#994C00" stroke="yellow" stroke-width="10">
    
    <animateTransform 
    attributeName="transform" type="rotate" 
    begin="0s" dur="8s" fill="freeze" 
    from="0,100,100" to="360,100,100" 
    repeatCount="indefinite" calcMode="spline" keySplines="1 0 0 1"/>
    
    </rect>

    结果图如下:

    这里写图片描述

    先平移再裁剪

    在实际绘制的元素外套一层g,给g加上clip-path。

    <g clip-path="url(#myclip2)">
    <rect x="100" y="100" width="300" height="300" fill="#994C00" stroke="yellow" stroke-width="10">
    
    <animateTransform attributeName="transform" type="rotate" begin="0s" dur="8s" fill="freeze" from="0,100,100" to="360,100,100" repeatCount="indefinite" calcMode="spline" keySplines="1 0 0 1"/>
    
    </rect>
    </g>

    结果图如下:

    这里写图片描述

  • 相关阅读:
    关于xutils中的BitmapUtil实现简单的缓存和下载
    自定义spinner
    Dart格式化输出
    使用 dsc_extractor 导出 dyld_shared_cache_arm64
    iOS11 获取手机已安装应用列表
    恢复二进制文件中的block符号表
    iOS 反反注入 修改__RESTRICT,__restrict工具
    Node的调试
    UVa10131
    UVa116
  • 原文地址:https://www.cnblogs.com/new0801/p/6176752.html
Copyright © 2011-2022 走看看