静的な塗りつぶしサイズを維持しながら、SVGスケールを親に合わせることは可能ですか？

Question

私は透明なオーバーレイを使用して、下にあるsvgアイテムの基本色にテクスチャを追加することで、かなりうまく動作しているsvgでペーパーテクスチャの外観を作成しようとしています。

しかし、私は、テクスチャがSVGに比例することに気付きました。画像はページの幅に設定されているので、大型モニターでは非常に伸びてしまい、とても見苦しくはありません。

固定サイズのパターン塗りつぶしで、svgアセットのスケールを自動的に設定できますか？ http://codepen.io/mix3d/pen/jWMPQE

EDIT：更新SVGは、中心から充填タイルと伸ばすことができれば、実際のSVGはなく、理論的

ボーナスポイントとcodepenここ

は完全な例であるcodepen 。ありがとう！

これは、SVGが現在どのように見えるかですが、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

私は最終的にCSSメディアクエリで、相対的なまともな回避策を見つけました。

svgにCSSのメディアクエリを埋め込むことができるので（これはimgタグで表示されるときのようにsvgのサイズに基づいて適用されます）、fill要素とは異なる縮尺のパターンを設定できます。

<defs>タグに10種類の縮尺パターンがあり、一致するメディアクエリがある場合、メモリのトレードオフがわかりませんが、これはごくわずかなオーバーヘッドでアプリケーションにとって十分です。参照されるイメージは同じであるため、一度ロードするだけで済みます。更新

は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

はい、あなたがそれを行うことができます。しかし、あなたはviewBoxを削除する必要があります。あなたは<rect>が100%の幅と高さを持たせる場合

その後、あなたはSVGしたい任意のサイズとパターンが全体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

ジェシーカーナガンはコメントとして。背景画像を使わないだけの理由はありますか？

（ここではペン - >http://codepen.io/thepixelninja/pen/EPgPdx）

すなわち。 pattern.svgという名前の空のファイルを作成します。私は、後のdivにそれを追加しますと、あなたのSVGコードを取得し、内部に貼り付け、そう...

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

のようなSVGヘッダーのものを追加して、私がイメージからストロークを削除しました。ストロークを繰り返すことは望ましくありません。

新しいsvgイメージファイルを保存し、CSSの通常のバックグラウンドイメージのように使用します。魅力のようなつまり...

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

ワークス:)