CODEWITHSUNDEEP
htmlsvg
dariosalvi
dariosalvi

Reputation: 425

center image in a pattern

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>

Upvotes: 0

Views: 83

Answers (1)

Alvin K.
Alvin K.

Reputation: 4379

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

Upvotes: 1

Related Questions