0

I have an SVG with a rectangle that takes the 100% width and I apply a pattern in it. I would like to have the image contained in the pattern to be placed in the centre of the rectangle and then repeated. The CSS equivalent would be: background-position: center;.

I would play with the x of the pattern, but the width is unknown beforehand.

Here's the snippet:

<svg width="100%" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet">
<style scoped="true">
@keyframes enlarge {
  0%  {r: 10;}
  30% {r: 10;}
  100% {r: 100%;}
}
#holecircle {
  animation: enlarge 4s alternate infinite;
}
</style>
 <defs>  
  <pattern id="pattern" x="0" y="0" width="480" height="480" patternUnits="userSpaceOnUse" patternTransform="matrix(0.04 0 0 0.04 0 10)">
    <path fill="black" d="m363.29999,363.89999c-12.89999,-4.60001 -31.39999,-6.20001 -43.20001,-8.80002c-6.79999,-1.5 -16.69998,-5.29999 -20,-9.19998c-3.29999,-4 -1.29999,-40.89999 -1.29999,-40.89999s6.10001,-9.60001 9.39999,-18s6.89999,-31.40001 6.89999,-31.40001s6.80002,0 9.20001,-11.89999c2.60001,-13 6.60001,-18.40001 6.10001,-28.10001c-0.5,-9 -5.20001,-9.5 -5.70001,-9.5l0,0c0,0 4.89999,-13.60001 5.60001,-42.39999c0.80002,-34.09999 -25.29999,-67.7 -74.29999,-67.7s-75,33.5 -74.3,67.60001c0.60001,28.7 5.60001,42.39999 5.60001,42.39999l0,0c-0.5,0 -5.2,0.5 -5.7,9.5c-0.5,9.7 3.59999,14.89999 6.09999,27.89999c2.40001,11.90001 9.2,12 9.2,12s3.60001,23.10001 6.90001,31.5c3.3,8.5 9.39999,18 9.39999,18s2,36.89999 -1.3,40.89999c-3.29999,4 -13.2,7.70001 -20,9.20001c-11.89999,2.60001 -30.29999,4.29999 -43.2,8.89999c-12.89999,4.60001 -52.7,20.10001 -52.7,52.10001l160,0l160,0c0,-32 -39.79999,-47.5 -52.70001,-52.10001z"/>
  </pattern>
 </defs>
 <g>
  <clipPath id="clip">
    <circle cx="50%" cy="50%" r="10" id="holecircle"/>
  </clipPath>
  <rect x="0" y="0" width="100%" height="100%" style="fill: url(#pattern);" clip-path="url(#clip)"/>   
 </g>
</svg>
dariosalvi
  • 405
  • 4
  • 13
  • 1
    Sorry I do not understand the question. The image is already centered in the pattern right? So what are you asking exactly? Maybe you want the svg to be horizontally and vertically positioned to the center of the page? – Andry Jul 23 '15 at 12:59
  • the image that is repeated in the pattern, that black head you see in the snippet, I want it to be placed in the centre of the image. The CSS equivalent would be: background-position: center; – dariosalvi Jul 24 '15 at 09:25

1 Answers1

1

Firstly, determine the browser width, say for this example it is 600px.

Next determine the pattern width, say it is 17px, from there you can calculate the remainder with 600 % 17 = 5. Which means 5px is left over if drawn from top left.

Lastly draw the icon in the center with an offset of 5/2 pixel lesser. In this case the x position would be 600/2 (center width) - 17/2 (center of pattern) - 5/2 (offset).

TLDR; x = ((browser_width - pattern_width - (browser_width % pattern_width))/2

Community
  • 1
  • 1
Alvin K.
  • 4,329
  • 20
  • 25