Czy można dopasować skalę SVG do obiektu macierzystego, zachowując statyczny rozmiar wypełnienia?

Question

Próbuję stworzyć wygląd tekstury papieru z svg, który pracuję dość dobrze, za pomocą przezroczystej nakładki, aby dodać teksturę nad podstawowy kolor elementu svg poniżej.

Jednak zauważam, że tekstura skaluje się z SVG. Ponieważ obraz jest ustawiony na szerokość strony, na dużych monitorach staje się bardzo rozciągnięty i nie wygląda ładnie.

Czy można automatycznie uzyskać skalę aktywów SVG z wypełnieniem o stałym rozmiarze?

Oto codepen z pełnym przykład: http://codepen.io/mix3d/pen/jWMPQE

EDIT: nowe codepen z faktycznym SVG, nie teoretycznego

punkty, jeśli SVG może rozciągać się z płytek wypełniającego z centrum . Dzięki!

ten sposób SVG wygląda obecnie, ale łuski tekstury z 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

końcu znalazłem względną godnej obejście, z zapytaniami mediów CSS.

Ponieważ możesz osadzać zapytania o media CSS w formacie SVG, (które będą stosowane w zależności od rozmiaru pliku SVG, np. Przy wyświetlaniu za pomocą znacznika img), wówczas mogę ustawić inny wzorzec skalowany jako element wypełnienia.

Nie wiem, co to jest kompromitacja pamięci, gdybym miał, powiedzmy, 10 różnych skalowanych wzorców w tagu <defs>, z zapytaniami o media do dopasowania, ale działa to wystarczająco dobrze dla mojej aplikacji, z niewielkim narzutem. Ponieważ obraz odniesienia jest taki sam, wystarczy jeden raz pobrać.

aktualizacja 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

Tak można to zrobić. Ale musisz usunąć viewBox.

Następnie, jeśli chcesz, aby <rect> miał szerokość i wysokość 100%, możesz ustawić dowolny rozmiar SVG, a wzór powtórzy się i wypełni cały plik 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

Jak skomentował Jesse Kernaghan. Czy istnieje powód, dla którego nie używasz tylko obrazu tła.

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

tj. utwórz pusty plik o nazwie pattern.svg (lub cokolwiek innego). następnie kod SVG i wkleić go w środku, z dodatkiem rzeczy nagłówka SVG jak tak ...

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

usunąłem skok z obrazka jako dodam że na div później. Nie chcemy powtórzyć tego uderzenia.

Następnie zapisz nowy plik obrazu svg i użyj go jak normalnego obrazu tła w css. czyli ...

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

działa jak czar :)