• P
    User •

    modificare un svg tramite css

    ci sto provando ma non ci sto riuscendo nonostante le guide lette...

    la domanda sorge spontanea... è possibile modificare un'immagine svg... con un css esterno?

    cioè...

    se lo inserisco come object

    codice:

    <object type="image/svg+xml" id="logo" data="/frontend/images/icona_test.svg">
    <div>SVG logo</div>
    </object>

    poi in un file css esterno posso mettere uno stile css che mi modifica il colore dell'svg?
    dalle mie prove NO

    codice:

    .st0{clip-path:url(#SVGID_2_);fill:#ff0000;}

    mi riesce solo se lo inserisco interamente come svg (codice) nell'html

    codice:

    <svg version="1.1" id="Livello_1" x="0" y="0" width="56.2" height="56.2" viewBox="0 0 56.2 56.2" xml:space="preserve" enable-background="new 0 0 56.194 56.191">

        <g id="neon"><circle class="st1" cx="28.1" cy="28.1" r="27.8"/>
        <path class="st0" d="M15.7 45.5c-5.6 0-10.1-4.5-10.1-10.1s4.5-10.1 10.1-10.1c5.6 0 10.1 4.5 10.1 10.1S21.2 45.5 15.7 45.5M15.7 24.5c-6 0-10.9 4.9-10.9 10.9s4.9 10.9 10.9 10.9c6 0 10.9-4.9 10.9-10.9S21.7 24.5 15.7 24.5M15.7 44.2c-4.8 0-8.8-3.9-8.8-8.8s3.9-8.8 8.8-8.8c4.8 0 8.8 3.9 8.8 8.8S20.5 44.2 15.7 44.2M15.7 26.1c-5.1 0-9.3 4.2-9.3 9.3s4.2 9.3 9.3 9.3c5.1 0 9.3-4.2 9.3-9.3S20.8 26.1 15.7 26.1M16.6 44.2c0.2 0 0.4 0 0.5-0.1V26.8c-0.2 0-0.3-0.1-0.5-0.1V44.2zM19.4 27.5c-0.2-0.1-0.3-0.2-0.5-0.2v16.3c0.2-0.1 0.4-0.1 0.5-0.2V27.5zM21.7 29.1c-0.2-0.2-0.3-0.3-0.5-0.5v13.7c0.2-0.1 0.4-0.3 0.5-0.5V29.1zM23.5 39.5c0.2-0.4 0.4-0.8 0.5-1.2v-5.6c-0.1-0.4-0.3-0.8-0.5-1.2V39.5zM7.4 38.2c0.1 0.4 0.3 0.8 0.5 1.2v-8c-0.2 0.4-0.4 0.8-0.5 1.2V38.2zM14.8 26.7c-0.2 0-0.4 0-0.5 0.1v17.3c0.2 0 0.3 0.1 0.5 0.1V26.7zM12.5 27.3c-0.2 0.1-0.4 0.1-0.5 0.2v15.9c0.2 0.1 0.3 0.2 0.5 0.2V27.3zM9.7 41.8c0.2 0.2 0.3 0.3 0.5 0.5V28.6c-0.2 0.1-0.4 0.3-0.5 0.5V41.8zM16.3 30.4c0 0.4-0.3 0.6-0.6 0.6s-0.6-0.3-0.6-0.6c0-0.3 0.3-0.6 0.6-0.6S16.3 30.1 16.3 30.4M40.5 45.5c-5.6 0-10.1-4.5-10.1-10.1s4.5-10.1 10.1-10.1c5.6 0 10.1 4.5 10.1 10.1S46 45.5 40.5 45.5M40.5 24.5c-6 0-10.9 4.9-10.9 10.9s4.9 10.9 10.9 10.9c6 0 10.9-4.9 10.9-10.9S46.5 24.5 40.5 24.5M40.5 44.2c-4.8 0-8.8-3.9-8.8-8.8s3.9-8.8 8.8-8.8 8.8 3.9 8.8 8.8S45.3 44.2 40.5 44.2M40.5 26.1c-5.1 0-9.3 4.2-9.3 9.3s4.2 9.3 9.3 9.3c5.1 0 9.3-4.2 9.3-9.3S45.6 26.1 40.5 26.1M41.4 44.2c0.2 0 0.4 0 0.5-0.1V26.8c-0.2 0-0.3-0.1-0.5-0.1V44.2zM44.2 27.5c-0.2-0.1-0.3-0.2-0.5-0.2v16.3c0.2-0.1 0.4-0.1 0.5-0.2V27.5zM46.5 29.1c-0.2-0.2-0.3-0.3-0.5-0.5v13.7c0.2-0.1 0.4-0.3 0.5-0.5V29.1zM48.3 39.5c0.2-0.4 0.4-0.8 0.5-1.2v-5.6c-0.1-0.4-0.3-0.8-0.5-1.2V39.5zM32.2 38.2c0.1 0.4 0.3 0.8 0.5 1.2v-8c-0.2 0.4-0.4 0.8-0.5 1.2V38.2zM39.6 26.7c-0.2 0-0.4 0-0.5 0.1v17.3c0.2 0 0.3 0.1 0.5 0.1V26.7zM37.3 27.3c-0.2 0.1-0.4 0.1-0.5 0.2v15.9c0.2 0.1 0.3 0.2 0.5 0.2V27.3zM34.5 41.8c0.2 0.2 0.3 0.3 0.5 0.5V28.6c-0.2 0.1-0.4 0.3-0.5 0.5V41.8zM41.1 30.4c0 0.4-0.3 0.6-0.6 0.6 -0.3 0-0.6-0.3-0.6-0.6 0-0.3 0.3-0.6 0.6-0.6C40.8 29.8 41.1 30.1 41.1 30.4M28.1 24.8c-5.6 0-10.1-4.5-10.1-10.1 0-5.6 4.5-10.1 10.1-10.1 5.6 0 10.1 4.5 10.1 10.1C38.2 20.3 33.6 24.8 28.1 24.8M28.1 3.8c-6 0-10.9 4.9-10.9 10.9 0 6 4.9 10.9 10.9 10.9 6 0 10.9-4.9 10.9-10.9C39 8.7 34.1 3.8 28.1 3.8M28.1 23.5c-4.8 0-8.8-3.9-8.8-8.8s3.9-8.8 8.8-8.8c4.8 0 8.8 3.9 8.8 8.8S32.9 23.5 28.1 23.5M28.1 5.4c-5.1 0-9.3 4.2-9.3 9.3 0 5.1 4.2 9.3 9.3 9.3 5.1 0 9.3-4.2 9.3-9.3C37.4 9.6 33.2 5.4 28.1 5.4M29 23.4c0.2 0 0.4 0 0.5-0.1V6.1c-0.2 0-0.4-0.1-0.5-0.1V23.4zM31.8 6.8c-0.2-0.1-0.3-0.2-0.5-0.2v16.3c0.2-0.1 0.4-0.1 0.5-0.2V6.8zM34.1 8.3c-0.2-0.2-0.3-0.3-0.5-0.5v13.7c0.2-0.1 0.4-0.3 0.5-0.5V8.3zM35.9 18.7c0.2-0.4 0.4-0.8 0.5-1.2v-5.6c-0.1-0.4-0.3-0.8-0.5-1.2V18.7zM19.8 17.5c0.1 0.4 0.3 0.8 0.5 1.2v-8c-0.2 0.4-0.4 0.8-0.5 1.2V17.5zM27.2 6c-0.2 0-0.4 0-0.5 0.1v17.3c0.2 0 0.3 0.1 0.5 0.1V6zM24.9 6.5c-0.2 0.1-0.4 0.1-0.5 0.2v15.9c0.2 0.1 0.3 0.2 0.5 0.2V6.5zM22.1 21.1c0.2 0.2 0.3 0.3 0.5 0.5V7.9c-0.2 0.1-0.4 0.3-0.5 0.5V21.1zM28.7 9.7c0 0.3-0.3 0.6-0.6 0.6 -0.3 0-0.6-0.3-0.6-0.6s0.3-0.6 0.6-0.6C28.4 9 28.7 9.3 28.7 9.7"/></g></svg>

    La mia necessità ed intenzione sarebbe quella di:

    • avere una pagina html
    • avere un css esterno della pagina
    • avere dei file svg, inseriti/inclusi nella pagina html...
    • usare delle classi scritte nel css esterno per modificare colore, dimensioni o altro del file svg incluso sulla pagina html

    insomma non andare ad inserire il codice svg completo nella pagina html ma solo il link al file svg,
    così che se domani dovessi cambiarlo, lo cambio una volta sola e non devo andare in cerca tra le pagine html del codice di quell'svg..che oltretutto risulterebbe molto poco distinguibile da un'altro svg...

    non so se sia chiaro...

    mi basterebbe vedere un esempio semplice... così se sbaglio, so dove...

    0
  • P
    User •

    Se non mi sono spiegato e non avete capito, chiedete pure...

    attualmente come già detto riesco a cambiare il colore dell'immagine svg "solo" se la inserisco come codice nell'html.. quindi con tag svg..ecc..

    io vorrei sapere se è possibile e nel caso come si fa... a cambiare colore.. (insomma ad interagire) inserendo l'immagine svg come object o altro.. insomma solo come riferimento all'immagine reale (come fosse una normale immagine jpg insomma)...

    0
Effettua l'accesso per rispondere