Samuele Locatelli
75 lines
3.2 KiB
Plaintext
75 lines
3.2 KiB
Plaintext
@page "/TestSvgDraw"
|
|
|
|
<PageTitle>TestSvgDraw</PageTitle>
|
|
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3>Test SVG</h3>
|
|
</div>
|
|
<div class="card-body py-1">
|
|
<div class="row py-4" style="background-color: #ACDDAC;">
|
|
<div class="col-4">
|
|
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<radialGradient id="RadialGrad2">
|
|
<stop offset="0%" stop-color="#000000" />
|
|
<stop offset="80%" stop-color="#151515" />
|
|
<stop offset="90%" stop-color="#444444" />
|
|
<stop offset="100%" stop-color="#878787" />
|
|
</radialGradient>
|
|
</defs>
|
|
<rect width="100" height="100" rx="50" fill="url(#RadialGrad2)" fill-opacity="0.5">
|
|
</rect>
|
|
<text id="TitleElem" x="10%" y="50%" class="text-light" style="font-size:2rem;">Titolo</text>
|
|
<g>
|
|
<rect x="10%" y="10%" width="80%" height="80%" fill="white" fill-opacity="0.1">
|
|
</rect>
|
|
<text x="10%" y="70%" class="text-light" style="font-size:0.8rem;">
|
|
testo più lungo... 0123456789
|
|
<animate attributeName="x"
|
|
values="10%;10%;-10%;-80%;-100%;-100%;10%"
|
|
dur="6s"
|
|
begin="2s"
|
|
repeatCount="indefinite" />
|
|
</text>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="col-4 text-center">
|
|
<ul class="list-group">
|
|
<li class="list-group-item active">
|
|
<b>SVG Draw</b>
|
|
</li>
|
|
<li class="list-group-item">
|
|
Test disegno diretto component SVG + html/css
|
|
</li>
|
|
<li class="list-group-item">
|
|
Disegno elemento circolare + gradiente (simil-button)
|
|
<div class="fs-3">→</div>
|
|
</li>
|
|
<li class="list-group-item">
|
|
Testo che scorre entro un box
|
|
<div class="fs-3">←</div>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
<div class="col-4">
|
|
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<radialGradient id="RadialGrad2">
|
|
<stop offset="0%" stop-color="#000000" />
|
|
<stop offset="80%" stop-color="#151515" />
|
|
<stop offset="90%" stop-color="#444444" />
|
|
<stop offset="100%" stop-color="#878787" />
|
|
</radialGradient>
|
|
</defs>
|
|
<rect width="10" height="10" rx="5" fill="url(#RadialGrad2)" fill-opacity="0.5">
|
|
</rect>
|
|
</svg>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div> |