學習svg的mask

此頁面,我們學習到了svg有一個mask標籤,白顯黑隱。

示例:

代碼:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" viewBox="0 0 200 200" width="200" height="200">
<mask id="themask">
<circle cx="50" cy="100" r="50" fill="white">
<animate attributeName="cx" dur="7s" values="50;150;50" repeatCount="indefinite"/>
<animate attributeName="cy" dur="7s" values="100;150;50;100" repeatCount="indefinite"/></circle>
</mask>
<g fill="black" mask="url(#themask)">
<path d="M 138.0 174.8 L 158.0 174.8 L 159.2 174.7 L 160.1 174.5 L 161.0 174.2 L 161.4 173.8 L 161.7 172.9 L 161.9 172.0 L 162.0 170.8 L 162.0 52.0 L 38.0 52.0 L 38.0 181.2 L 26.0 187.2 L 26.0 42.0 L 38.0 48.0 L 94.0 48.0 L 94.0 13.0 L 106.0 15.0 L 109.0 17.0 L 106.0 18.8 L 106.0 48.0 L 162.0 48.0 L 168.0 43.0 L 179.0 52.0 L 174.0 56.0 L 174.0 170.8 L 173.8 173.3 L 173.4 175.8 L 172.6 178.2 L 171.3 180.5 L 169.7 182.5 L 167.7 184.1 L 165.4 185.4 L 163.0 186.2 L 160.5 186.6 L 158.0 186.8 L 158.0 180.8 L 138.0 177.8 Z M 106.0 57.0 L 109.0 59.0 L 106.0 60.8 L 106.0 109.9 L 108.61126756668091 109.9 L 111.4 103.9 L 114.5 97.4 L 117.5 91.4 L 120.2 85.9 L 122.7 80.8 L 125.0 76.2 L 127.0 71.9 L 128.7 68.2 L 130.1 64.8 L 130.90939807891846 62.84395456314087 L 130.8 62.8 L 131.8 60.8 L 142.0 67.3 L 143.8 70.4 L 139.77544260025024 70.7469446182251 L 138.1 73.3 L 135.7 76.9 L 133.0 80.8 L 130.1 85.1 L 126.7 89.8 L 123.1 94.9 L 119.1 100.3 L 114.6 105.9 L 111.33333330154419 109.9 L 131.1 109.9 L 137.1 104.9 L 148.1 113.9 L 143.1 117.9 L 143.1 163.5 L 131.1 169.5 L 131.1 157.5 L 68.8 157.5 L 68.8 169.5 L 56.8 175.5 L 56.8 103.9 L 68.8 109.9 L 94.0 109.9 L 94.0 55.0 Z M 68.8 113.9 L 68.8 153.5 L 131.1 153.5 L 131.1 113.9 Z M 73.9 92.9 L 73.1 89.9 L 72.1 86.8 L 70.8 83.7 L 69.4 80.6 L 67.8 77.4 L 66.0 74.2 L 64.0 70.8 L 61.6 67.6 L 62.9 66.3 L 66.1 68.8 L 69.4 71.3 L 72.3 73.9 L 75.1 76.7 L 77.6 79.7 L 79.8 82.7 L 81.9 85.9 L 83.7 89.3 L 85.2 92.7 L 86.6 96.2 L 85.8 100.7 L 82.1 103.4 L 77.6 102.6 L 74.9 98.9 L 74.5 95.9 Z " />
</g>
</svg>

Leave a Comment