1

Estou tentando colocar um icone font awesome dentro do meu SVG.

Estou tendo como base esse tutorial:

http://tutorials.jenkov.com/svg/svg-icons.html

estou fazendo da seguinte forma, porém o icone esta aparecendo fora do circle.

<body>
<div class="Container_4_Button">
                <div class="SVGButton">
                    <svg viewBox="0 0 1002 120"><!--preserveAspectRatio="none"-->
                          <circle id="Menu1" cx="60" cy="60" r="50"/>
                          <img  src = "css/SvgIcons/iconmonstr-id-card-25.svg" style = "height: 50px">
                          <text text-anchor="middle" id="txt1" x="60" y="90">escrita</text>

                          <circle id="Menu2" cx="182" cy="60" r="50"/>
                          <img  src = "css/SvgIcons/iconmonstr-id-card-25.svg" style = "height: 50px">
                          <text text-anchor="middle" id="txt1" x="182" y="90">escrita</text>

                          <circle id="Menu3" cx="304" cy="60" r="50"/>
                          <img  src = "css/SvgIcons/iconmonstr-id-card-25.svg" style = "height: 50px">
                          <text text-anchor="middle" id="txt1" x="304" y="90">escrita</text>

                          <circle id="Menu4" cx="426" cy="60" r="50"/>
                          <img  src = "css/SvgIcons/iconmonstr-id-card-25.svg" style = "height: 50px">
                          <text text-anchor="middle" id="txt1" x="426" y="90">escrita</text>

                          <circle id="Menu5" cx="548" cy="60" r="50"/>
                          <img  src = "css/SvgIcons/iconmonstr-id-card-25.svg" style = "height: 50px">
                          <text text-anchor="middle" id="txt1" x="548" y="90">escrita</text>

                          <circle id="Menu6" cx="670" cy="60" r="50"/>
                          <img  src = "css/SvgIcons/iconmonstr-id-card-25.svg" style = "height: 50px">
                          <text text-anchor="middle" id="txt1" x="670" y="90">escrita</text>

                          <path   id="Menu7" d="M792,10Q745.75,9.1 742,60Q745.75,110.9 792,110Q857,110 922,110Q968.25,110.9 972,60Q968.25,9.1 922,10Q857,10 792,10"/>


                    </svg>
                </div>
            </div>
</body>

o que estou fazendo de errado ?

1 Resposta 1

1

Cara tem vários erros ai, primeiro que vc não deve usar a tad <img> assim no SVG, depois que não se usa FontAwesome da forma que vc fez. Vc precisa usar as classes da própria fonte. Aqui tem uma documentação com o que seria uma abordagem mais correta para eles https://fontawesome.com/how-to-use/on-the-web/advanced/svg-symbols E uma obs é que vc tem que usar a versão .js do FW e não a versão .css

Mas na "gambiarra" da para fazer uns ajustes... vc vai precisar ajustar o X/Y de cada text que vai ter a classe do FW, pois ao .js cria um viewbox que vc não vai conseguir manipular direito... Essa foi a solução que cheguei, mas deve ter um jeito melhor para isso acredito.

inserir a descrição da imagem aqui

Eu fiz só os dois primeiros, o resto vc faz para ir pegando o jeito e entender melhor como ajustar.

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"></script>

<div class="Container_4_Button">
    <div class="SVGButton">
        <svg viewBox="0 0 1002 120">
            <!--preserveAspectRatio="none"-->

            <defs>
                <style>
                    circle {
                        fill: black;
                    }
                    text {
                        fill: aqua;
                    }
                    g {
                        color: red;
                    }
                    g path {
                        transform:scale(0.5);
                    }
                </style>
            </defs>

            <circle id="Menu1" cx="60" cy="60" r="50" />

            <circle id="Menu2" cx="182" cy="60" r="50" />

            <circle id="Menu3" cx="304" cy="60" r="50" />

            <circle id="Menu4" cx="426" cy="60" r="50" />

            <circle id="Menu5" cx="548" cy="60" r="50" />

            <circle id="Menu6" cx="670" cy="60" r="50" />

            <path id="Menu7" d="M792,10Q745.75,9.1 742,60Q745.75,110.9 792,110Q857,110 922,110Q968.25,110.9 972,60Q968.25,9.1 922,10Q857,10 792,10" />

            <g>
                <text text-anchor="middle" id="txt1" x="-415" y="30" class="fas fa-address-book"></text>
                <text text-anchor="" id="txt2" x="-295" y="30" class="fab fa-accessible-icon"></text>
                <text text-anchor="middle" id="txt3" x="304" y="90">escrita</text>
                <text text-anchor="middle" id="txt4" x="426" y="90">escrita</text>
                <text text-anchor="middle" id="txt5" x="548" y="90">escrita</text>
                <text text-anchor="middle" id="txt6" x="670" y="90">escrita</text>
            </g>

        </svg>
    </div>
</div>

2
  • 1
    Muito grato pela ajuda 25/09/2019 às 19:19
  • 1
    @GabrielSilva sem problemas meu caro, mas se vc pretende transformar isso em um menu pode ser que vc tenha problemas em colocar link nos elementos, pode ser que vc precise de JavaScript para isso...
    – hugocsl
    25/09/2019 às 19:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .