Ist es möglich, eine SVG-Skalierung für übergeordnete Elemente zu verwenden, um eine statische Füllgröße beizubehalten?

Question

Ich versuche, ein Papier Textur Look mit Svg, die ich ziemlich gut arbeiten, mit einem transparenten Overlay, um die Textur über die Grundfarbe des Svg-Element darunter hinzuzufügen.

Allerdings merke ich, dass die Textur mit dem SVG skaliert. Da das Bild auf die Breite der Seite eingestellt ist, wird es auf großen Monitoren extrem gestreckt und sieht nicht sehr gut aus.

Ist es möglich, den SVG-Asset-Maßstab automatisch mit einer Musterfüllung mit fester Größe zu erhalten?

ist hier ein codepen mit einem vollständigen Beispiel: http://codepen.io/mix3d/pen/jWMPQE

EDIT: Aktualisiertes mit tatsächlichen svg codepen, keine theoretischen

Bonuspunkte, wenn der SVG mit der Füllung Fliesen von der Mitte dehnt . Vielen Dank!

Dies ist, wie die SVG sieht zur Zeit, aber die Textur skaliert mit der 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

Ich fand schließlich ein relativ anständiges Problem zu umgehen, mit CSS-Medienanfragen.

Da Sie css Medienabfragen in Svg einbetten können (was basierend auf der SVG-Größe gelten wird, wie bei der Anzeige durch ein IMG-Tag), kann ich dann ein unterschiedlich skaliertes Muster als Füllelement festlegen.

Ich weiß nicht, was der Speicher-Kompromiss ist, wenn ich sagen würde, 10 verschiedene skalierte Muster in der <defs> Tag, mit Medienabfragen zu entsprechen, aber das funktioniert gut genug für meine Anwendung, mit vernachlässigbarem Aufwand. Da das referenzierte Bild das gleiche ist, muss es nur einmal geladen werden.

codepen aktualisiert: 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

Ja Sie es tun können. Aber Sie müssen die ViewBox entfernen.

Dann, wenn Sie die <rect> haben eine Breite und Höhe von 100%, können Sie die SVG jede gewünschte Größe machen und das Muster wird wiederholen und füllen Sie die gesamte 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

Als Jesse Kernaghan kommentiert. Gibt es einen Grund, warum Sie nicht nur ein Hintergrundbild verwenden?

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

dh. Erstellen Sie eine leere Datei namens pattern.svg (oder was auch immer). dann nehmen Sie Ihren svg Code und fügen Sie sich in mich, mit der Zugabe der svg Kopf Sachen wie so ...

<?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> 

ich den Takt aus dem Bild entfernt habe, wie ich später, dass auf den div hinzufügen würde. Wir wollen nicht, dass sich der Strich wiederholt.

Dann speichern Sie Ihre neue SVG-Bilddatei und verwenden Sie es wie ein normales Hintergrundbild in CSS. dh ...

<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> 

wirkt wie ein Zauber :)