@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">&rarr;</div>
                    </li>
                    <li class="list-group-item">
                        Testo che scorre entro un box
                        <div class="fs-3">&larr;</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>