3

Não consigo manipular o tamanho desse hexagono, gostaria que inicialmente ele tivesse o tamanho de 165x165px, e respectivamente torna-lo responsivo.

Não tenho muita experiência com SVG.

<svg width="165" height="165">

            <image xlink:href="http://garethlewis.cool/img/photography/square/times-square-fisheye.jpg" width="165" height="165" preserveAspectRatio="xMidYMid" clip-path="url(#clip)"></image>

            <defs>
                <clipPath id="clip">
                    <path d="M96.228,74.308 C92.786,80.643 83.583,86.058 77.115,89.716 C69.795,93.856 59.356,99.584 50.835,99.982 C43.307,100.333 33.742,95.509 27.156,92.046 C19.702,88.126 9.232,82.448 4.607,75.674 C0.521,69.69 0.16,59.451 0.041,52.33 C-0.094,44.27 -0.124,32.864 3.772,25.692 C7.214,19.357 16.417,13.942 22.885,10.284 C30.205,6.144 40.644,0.416 49.165,0.018 C56.693,-0.333 66.258,4.491 72.844,7.954 C80.298,11.874 90.768,17.552 95.393,24.326 C99.479,30.31 99.84,40.549 99.959,47.67 C100.094,55.73 100.124,67.136 96.228,74.308 z"></path>
                </clipPath>
            </defs>

        </svg>
8
  • SVG por si só já é uma imagem gráfica responsiva, você pode alterar o tamanho do browser o quanto quiser, que a imagem não perderará sua qualidade Commented 21/07/2015 às 13:49
  • @MarceloBonifazio sim, mas não sei o que está acontecendo, teste a imagem por favor ela não fica no tamanho que estou aplicando, tem algo de errado Commented 21/07/2015 às 13:51
  • jsfiddle.net/gk5yzchx agora, você queria que ao diminuir ou aumentar o browser, ela continuasse respeitando essas mesmas proporções? Commented 21/07/2015 às 13:52
  • 2
    @PabloCampina quando dizes que começa em 165, isso para que dimensões do ecrã? Para ser proporcional/responsivo acho que tens de defenir um tamanho padrão para o qual o svg deve ter 165px. Exemplo para ecrã 1650 x 1650: jsfiddle.net/d18jvfkj
    – Sergio
    Commented 21/07/2015 às 14:28
  • 1
    @Sergio muito obrigado, você resolveu meu problema, abraço. Commented 21/07/2015 às 14:43

1 Resposta 1

3

Para ser proporcional/responsivo acho que tens de defenir um tamanho padrão para o qual o svg deve ter 165px. Assim usando o preserveAspectRatio e o viewBox podes fazer assim (exemplo para ecrã 1650 x 1650):

<svg width="100%" height="100%" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1650 1650">

jsFiddle: http://jsfiddle.net/d18jvfkj/

viewBox:

The viewBox attribute allows to specify that a given set of graphics stretch to fit a particular container element.

Traduzido livremente:
O viewBox permite um dado grupo de gráficos adaptar-se a um elemento contentor.

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 .