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>

    结果图如下:

    这里写图片描述

  • 相关阅读:
    BZOJ1029_建筑抢修_KEY
    黑匣子_KEY
    食物链_KEY
    滑雪_KEY
    抓猫_KEY
    线段树初步__ZERO__.
    听说alphago又要挑战sc2了?——我眼中的人工智能
    我眼中的算法
    opencv拼接相关1
    Cstring到string
  • 原文地址:https://www.cnblogs.com/new0801/p/6176752.html
Copyright © 2011-2022 走看看