v2.5.2
Giriş yap

SVG dosyasından # ile SVG çekme

resulgunaydin
411 defa görüntülendi

Bi sitenin tasarımını kodlamaya çalışıyorum. 80-100 tane falan farklı spor dallarının iconları var. Bunları daha önce kullanmadığım şekilde svg dosyasına toplu kaydedip id ile use kullanarak çekiyor. Mantığını anladım fakat kendi sitemde gösteremiyorum. Aynı kodları yazdığımda çalışmıyor. Bu iconları nasıl gösterebilirim yardımcı olabilecek var mı? En kötü ihtimal direkt böyle bi icon set verebilecek var mı? (Umarım buna mecbur kalmam :) )

(Mobil görünüm haliyle açın daha iyi görürsünüz hemen sliderın altında)
Bu sitede ki spor iconlarını almak istiyorum

    <!-- index.html sayfası !-->
    <svg><use xlink:href="images/icons/sport-icons.svg#sports_0"></use></svg>
    <svg><use xlink:href="images/icons/sport-icons.svg#sports_1"></use></svg>
    <svg><use xlink:href="images/icons/sport-icons.svg#sports_2"></use></svg>
    <svg><use xlink:href="images/icons/sport-icons.svg#sports_3"></use></svg>
    <svg><use xlink:href="images/icons/sport-icons.svg#sports_4"></use></svg>
    <!-- sport-icons.svg dosyası !-->
   <svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="sports_0" viewBox="0 0 32 32">
        <path d="M31.8 11.5a.6.6 0 00-.5-.2h-9.1a4.5 4.5 0 004.7-4.7c0-1.2-.5-2.3-1.4-3.2-1-1-2-1.4-3.3-1.4-1.5 0-2.7.5-3.5 1.6L16 7l-2.7-3.4c-.8-1-2-1.6-3.5-1.6-1.3 0-2.4.5-3.3 1.4s-1.3 2-1.3 3.3S5.6 9 6.5 10c1 .9 2 1.3 3.3 1.3H.7l-.5.2-.2.5v6.7c0 .2 0 .3.2.4l.5.2h2V28c0 .6.2 1 .5 1.4s1 .6 1.5.6h22.6c.6 0 1-.2 1.5-.6s.5-.8.5-1.4v-8.7h2c.2 0 .4 0 .5-.2l.2-.4V12c0-.2 0-.4-.2-.5zm-11-6.2c.3-.4.8-.6 1.4-.6.5 0 1 .2 1.4.5s.6 1 .6 1.5-.2 1-.6 1.4a2 2 0 01-1.4.6h-4l2.5-3.4zm-11 3.4c-.5 0-1-.2-1.4-.6s-.6-.9-.6-1.4.2-1 .6-1.5a2 2 0 011.4-.5c.6 0 1.1.2 1.5.6l2.6 3.4h-4zm9.5 6.6v11c0 .3 0 .6-.3.8s-.6.2-1 .2h-4c-.4 0-.7 0-1-.2s-.3-.5-.3-.9V11.3h6.6v4z"/>
    </symbol>
    <symbol id="sports_1" viewBox="0 0 32 32">
        <path d="M16 0a16 16 0 100 32 16 16 0 000-32zm.57 4.61l5.56-2.22c.63.29 1.25.62 1.83.99h.02c.57.37 1.12.77 1.64 1.21l.05.04c.23.2.46.4.68.62l.08.08c.24.22.46.46.68.7l.05.06c.19.21.37.43.55.66l.13.16c.19.25.38.5.55.76l-1.1 4.72-5.46 1.82-5.26-4.2zm-12.4 2.3l.12-.16.54-.65.06-.07.67-.7.08-.08.68-.6.05-.05C6.9 4.16 7.43 3.76 8 3.4l.03-.02c.58-.37 1.18-.7 1.81-.98l5.59 2.21V10l-5.25 4.2-5.46-1.81-1.1-4.72c.17-.26.35-.51.55-.76zm-.65 17.27c-.16-.23-.3-.48-.45-.73l-.04-.06c-.14-.24-.27-.5-.4-.75a14.6 14.6 0 01-.96-2.47l-.04-.11-.2-.78-.01-.08c-.13-.6-.23-1.2-.28-1.8l3.25-3.91 5.42 1.8 1.57 6.3-2.58 3.43zm16.03 6.32l-.81.18-.12.02c-.23.04-.47.08-.7.1l-.2.03c-.21.03-.43.04-.65.06l-.21.02a14.35 14.35 0 01-1.65 0h-.1l-.68-.06h-.03c-.5-.06-1-.14-1.5-.24l-3.16-4.94 2.54-3.4h7.43l2.59 3.42zM30.6 19.2l-.02.08-.2.78-.03.1-.26.81v.01c-.2.56-.44 1.12-.7 1.65v.01c-.13.26-.27.5-.41.75l-.04.06-.44.73-5.27.83-2.6-3.43 1.57-6.29 5.42-1.8 3.26 3.9c-.06.61-.15 1.21-.29 1.81z"/>
    </symbol>
    <symbol id="sports_2" viewBox="0 0 41 32">
        <path d="M21 18C9 18 0 14 0 10v13c0 5 9 9 21 9s20-4 20-9V10c0 4-9 8-20 8z"/>
        <path d="M41 8c0 5-9 9-20 9S0 13 0 8c0-4 9-8 21-8s20 4 20 8z"/>
    </symbol>
    <symbol id="sports_3" viewBox="0 0 32 32">
        <path d="M10.1 11.4l-6-6a15.9 15.9 0 00-4.1 10c3.8-.1 7.3-1.5 10.1-4zM11.4 10.1c2.5-2.8 3.9-6.3 4-10.1-3.8.1-7.3 1.6-10 4zM16 6.2c-.8 2-1.9 3.7-3.2 5.2l3.2 3.3L26.6 4C24 1.7 20.7.3 17.2 0c0 2.1-.4 4.2-1.2 6.2zM32 14.8c-.3-3.5-1.7-6.8-4-9.4L17.3 16l3.3 3.2A17.3 17.3 0 0132 14.8zM21.9 20.6l6 6c2.5-2.7 4-6.2 4.1-10-3.8.1-7.3 1.5-10.1 4zM20.6 21.9a15.5 15.5 0 00-4 10.1c3.8-.1 7.3-1.6 10-4zM14.7 16l-3.3-3.2A17.3 17.3 0 010 17.2c.3 3.5 1.7 6.8 4 9.4zM16 25.8c.8-2 1.9-3.7 3.2-5.2L16 17.3 5.4 28c2.6 2.3 5.9 3.7 9.4 4 0-2.1.4-4.2 1.2-6.2z"/>
    </symbol>
    <symbol id="sports_4" viewBox="0 0 32 32">
        <path d="M14.5 0A16 16 0 00.1 14.5v.1C4 15 8 17 11.6 20.4S17 28 17.5 31.9a16 16 0 0014.4-14.3v-.1C28 17 24 15 20.4 11.6S15 4 14.5.1z"/>
        <path d="M32 15.5A16 16 0 0016.5 0c.4 3.4 2.2 7.1 5.3 10.2S28.6 15 32 15.5zM0 16.5A16 16 0 0015.5 32c-.4-3.4-2.3-7.1-5.3-10.2S3.4 17 0 16.5z"/>
    </symbol>
</svg>
resulgunaydin
956 gün önce

@mubado zaten öyle yaptım hocam. Çalışmıyor bu şekil başka bir şey lazım