È possibile avere una scala SVG adatta per il genitore, mantenendo una dimensione di riempimento statico?

Question

Sto cercando di creare un aspetto di texture di carta con svg, che ho funzionato abbastanza bene, usando una sovrapposizione trasparente per aggiungere la texture al colore di base dell'elemento svg sottostante.

Tuttavia, noto che la trama viene ridimensionata con SVG. Poiché l'immagine è impostata sulla larghezza della pagina, su monitor di grandi dimensioni diventa estremamente tesa e non sembra molto bella.

È possibile avere automaticamente la scala di asset svg, con un riempimento di modello a dimensione fissa?

Ecco un codepen con un esempio completo: http://codepen.io/mix3d/pen/jWMPQE

EDIT: aggiornato codepen con svg reale, non un teorico uno

punti di bonus se lo SVG può allungare con le piastrelle di riempimento dal centro . Grazie!

Questo è come lo SVG sembra attualmente, ma le scaglie di struttura con l'svg

<svg version="1.1" id="paper_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="10 0 1526 407.93"> 
<style type="text/css"> 
    .overlay{fill:url(#img1);fill-opacity:1;} 
    .circle{fill:#62B4B8;} 
</style> 


<defs> 
    <pattern id="img1" patternUnits="userSpaceOnUse" width="243" height="201"> 
    <image xlink:href="http://i.imgur.com/grtbkje.png" x="0" y="0" width="486" height="402" /> 
    </pattern> 
    <filter id="f3" x="-40%" y="0" width="180%" height="400%"> 
     <feOffset result="offOut" in="SourceAlpha" dx="0" dy="3" /> 
     <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" /> 
     <feColorMatrix in="blurOut" result="transparency" type="matrix" 
     values="0 0 0 0 0 
       0 0 0 0 0 
       0 0 0 0 0 
       0 0 0 .5 0"/> 
     <feBlend in="SourceGraphic" in2="transparency" mode="normal" /> 
    </filter> 
</defs> 
<g> 
    <circle id="Background_Circle" class="circle" cx="280.52" cy="226.67" r="166.67"/> 
    <!-- I know I could probably use a filter to achieve the same overlay effect, but this worked for now, duplicate the object with the semi-transparent fill pattern --> 
    <circle id="Background_Circle" class="overlay" cx="280.52" cy="226.67" r="166.67"/> 
</g> 
</svg> 

Answer 1

ho finalmente trovato una soluzione decente relativa, con media query CSS.

Poiché è possibile incorporare le query multimediali del css in svg, (che si applicherà in base alle dimensioni dello svg, come quando è visualizzato tramite un tag img), posso quindi impostare un modello in scala differente come elemento di riempimento.

Non so quale sia il compromesso di memoria, se avessi, diciamo, 10 diversi modelli in scala nel tag <defs>, con le query multimediali corrispondenti, ma questo funziona abbastanza bene per la mia applicazione, con un sovraccarico trascurabile. Poiché l'immagine di riferimento è la stessa, deve essere caricata una sola volta.

aggiornato codepen: http://codepen.io/mix3d/pen/BjdJge

<svg version="1.1" id="paper_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="10 0 1526 407.93"> 
<style type="text/css"> 
    .overlay{fill:url(#tsmall);fill-opacity:1;} 
    .circle{fill:#62B4B8;} 
    @media (max-width: 1000px){ 
    .overlay{fill:url(#tlarge);} 
    } 
</style> 


<defs> 
    <pattern id="tsmall" patternUnits="userSpaceOnUse" width="243" height="201"> 
    <image xlink:href="http://i.imgur.com/grtbkje.png" x="0" y="0" width="486" height="402" /> 
    </pattern> 
    <pattern id="tlarge" patternUnits="userSpaceOnUse" width="972" height="804"> 
    <image xlink:href="http://i.imgur.com/grtbkje.png" x="0" y="0" width="972" height="804" /> 
    </pattern> 
</defs> 
<g> 
    <circle id="Background_Circle" class="circle" cx="280.52" cy="226.67" r="166.67"/> 
    <!-- I know I could probably use a filter to achieve the same overlay effect, but this worked for now, duplicate the object with the semi-transparent fill pattern --> 
    <circle id="Background_Circle" class="overlay" cx="280.52" cy="226.67" r="166.67"/> 
</g> 
</svg> 

Answer 2

Sì, è possibile farlo. Ma è necessario rimuovere il ViewBox.

Quindi, se si imposta <rect> con larghezza e altezza pari a 100%, è possibile rendere SVG qualsiasi dimensione desiderata e il motivo verrà ripetuto e riempire l'intero SVG.

#svg1 { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
#svg2 { 
 
    width: 250px; 
 
    height: 250px; 
 
}

<svg id="svg1"> 
 
    <defs> 
 
    <pattern id="pattern2" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"> 
 
     <circle cx="10" cy="10" r="5" fill=#0000ff /> 
 
    </pattern> 
 
    </defs> 
 

 
    <rect x="0" y="0" width="100%" height="100%" style="stroke: #000000; fill: url(#pattern2);" /> 
 
</svg> 
 

 

 
<svg id="svg2"> 
 
    <defs> 
 
    <pattern id="pattern2" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"> 
 
     <circle cx="10" cy="10" r="5" fill=#0000ff /> 
 
    </pattern> 
 
    </defs> 
 

 
    <rect x="0" y="0" width="100%" height="100%" style="stroke: #000000; fill: url(#pattern2);" /> 
 
</svg>

Answer 3

Come Jesse Kernaghan ha commentato. C'è una ragione per cui non usi solo un'immagine di sfondo.

(Pen qui ->http://codepen.io/thepixelninja/pen/EPgPdx)

es. crea un file vuoto chiamato pattern.svg (o qualsiasi altra cosa). poi prendere il codice SVG e incollarlo all'interno, con l'aggiunta delle cose svg intestazione in questo modo ...

<?xml version="1.0" encoding="iso-8859-1"?><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="pattern" viewBox="0 0 100 100"><defs><pattern id="pattern2" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="5" fill="#0000ff" /></pattern></defs><rect x="0" y="0" width="100" height="100" style="fill: url(#pattern2);" /></svg> 

Ho rimosso la corsa dall'immagine come io aggiungo che sul div tardi. Non vogliamo che il colpo si ripeta.

Quindi salvare il nuovo file di immagine SVG e usarlo come una normale immagine di sfondo in css. cioè ...

<div id="circles"></div> 

<style> 
    #circles { 

     //always center the circles within the box 
     background-position:center; 

     //change this to change the size of the circles 
     background-size:100px 100px; 

     //point this to where you saved your new svg image 
     background-image:url(http://urbanise.net.au/pattern.svg); 

     //set the width of the box 
     width:100%; 

     //set the height 
     height:500px; 

     //add the border back in 
     border:5px solid #000; 

    } 
</style> 

funziona come un fascino :)