зеркало из https://github.com/mozilla/gecko-dev.git
30 строки
900 B
HTML
30 строки
900 B
HTML
<style>
|
|
#rec1 {
|
|
transform: translate(15px,15px) scale(2,4);
|
|
}
|
|
#rec3 {
|
|
transform: translate(100px,100px) scale(2,4);
|
|
}
|
|
#clipPath3 {
|
|
transform: translate(100px,100px);
|
|
}
|
|
</style>
|
|
<svg style="width: 400px; height: 400px; border: 1px solid red">
|
|
<defs>
|
|
<clipPath id="clipPath1">
|
|
<rect id="rec1" width="20px" height="10px" />
|
|
<rect id="rec2" width="20px" height="10px" />
|
|
</clipPath>
|
|
<clipPath id="clipPath2">
|
|
<rect id="rec3" width="20px" height="10px" />
|
|
</clipPath>
|
|
<clipPath id="clipPath3">
|
|
<rect id="rec4" x="200px" y="200px" width="40px" height="40px" />
|
|
</clipPath>
|
|
</defs>
|
|
|
|
<circle cx="25px" cy="25px" r="20px" fill="skyblue" clip-path="url(#clipPath1)" />
|
|
<circle cx="125px" cy="125px" r="20px" fill="skyblue" clip-path="url(#clipPath2)" />
|
|
<circle cx="225px" cy="225px" r="20px" fill="skyblue" clip-path="url(#clipPath3)" />
|
|
</svg>
|