html - center image in a pattern -

i have svg rectangle takes 100% width , apply pattern in it. have image contained in pattern placed in centre of rectangle , repeated. css equivalent be: background-position: center;.

i play x of pattern, width unknown beforehand.

here's 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>

firstly, determine browser width, example 600px.

next determine pattern width, 17px, there can calculate remainder 600 % 17 = 5. means 5px left on if drawn top left.

lastly draw icon in center offset of 5/2 pixel lesser. in case x position 600/2 (center width) - 17/2 (center of pattern) - 5/2 (offset).

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