38 lines
1.6 KiB
XML
38 lines
1.6 KiB
XML
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<style>
|
|
.ring {
|
|
outline: -webkit-focus-ring-color 5px auto;
|
|
}
|
|
</style>
|
|
|
|
<circle cx="65" cy="60" r="50" fill="orange" class="ring" />
|
|
<path d="M 140 10 l 50 100 l 50 -50 l -20 0 l -20 -30 Z" fill="orange" class="ring" />
|
|
<g class="ring">
|
|
<rect x="270" y="10" width="100" height="100" fill="orange" />
|
|
</g>
|
|
|
|
<g transform="translate(60, 140) rotate(30)">
|
|
<rect width="100" height="100" fill="orange" class="ring" />
|
|
</g>
|
|
<rect width="100" height="100" fill="orange" transform="translate(200, 140) rotate(30)" class="ring" />
|
|
<g class="ring">
|
|
<rect width="100" height="100" fill="orange" transform="translate(360, 140) rotate(30)" />
|
|
</g>
|
|
|
|
<text x="10" y="320" class="ring">focused text</text>
|
|
<text transform="translate(100, 320) rotate(30)" class="ring">focused text</text>
|
|
<g class="ring">
|
|
<text transform="translate(200, 320) rotate(30)" class="ring">focused text</text>
|
|
</g>
|
|
|
|
<clipPath id="clip">
|
|
<rect width="100" height="100" />
|
|
</clipPath>
|
|
<image xlink:href="resources/green-checker.png" x="10" y="400" width="530" height="410" clip-path="url(#clip)" class="ring" />
|
|
<image xlink:href="resources/green-checker.png" transform="translate(200, 400) rotate(30)" width="530" height="410" class="ring" clip-path="url(#clip)"/>
|
|
<g class="ring" transform="translate(360, 400) rotate(30)">
|
|
<image xlink:href="resources/green-checker.png" width="530" height="410" clip-path="url(#clip)"/>
|
|
</g>
|
|
|
|
</svg>
|