How to get an image as the SVG fill's background-CodePudding

I want my SVG to have an image for it's fill attribute instead of a solid color, it seems I have to use the pattern and image properties but those don't seem to behave very intuitively because no matter what I try the pattern never fills the whole SVG unless the image has the same aspect ratio as te SVG, I want the image to fill the whole SVG I don't mind if it gets streched or repeated. Here's my code:

        <svg viewBox="0 0 286.91 286.91" height="100" width="100" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <pattern id="LogoImage" width="100%" height="150%">
                    <image href="https://cdn.pixabay.com/photo/2018/02/11/09/37/matrix-full-3145364_1280.jpg" width="287" height="287" />
                </pattern>
            </defs>
            <path d="M375.04 397.12c-62.102 0-114.99 39.991-132.59 95.105h19.648a113.343 113.343 0 0 1 7.306-15.727h37.811c-1.649 5.144-3.004 10.406-4.128 15.727h19.153c1.339-5.362 2.934-10.627 4.83-15.727h36.49v15.727h18.493v-15.727h39.42c2.122 5.104 3.904 10.361 5.408 15.727h19.153c-1.286-5.326-2.784-10.578-4.623-15.727h39.256a113.303 113.303 0 0 1 7.306 15.727h19.607c-17.598-55.114-70.442-95.105-132.54-95.105zm27.904 21.754c25.884 5.952 48.491 19.91 64.848 39.132H433.49c-7.66-14.821-17.811-28.198-30.546-39.132zm-61.215 1.362c-11.464 10.641-20.506 23.525-27.244 37.77h-32.197c15.209-17.874 35.816-31.194 59.44-37.77zm40.329 5.944c12.192 8.346 22.03 19.352 29.844 31.825h-29.844V426.18zm-18.493.124v31.702h-27.863c7.158-12.502 16.297-23.48 27.863-31.702zm-115.58 83.795c-1.84 0-3.377.415-4.623 1.28-1.246.864-1.858 1.94-1.858 3.178 0 .926.267 2.209.867 3.88l9.824 28.234c.3.844.644 1.796 1.032 2.807.389 1.01.931 1.91 1.569 2.683.638.773 1.506 1.367 2.6 1.816 1.095.45 2.47.66 4.128.66 2.058 0 3.673-.372 4.912-1.114 1.24-.741 2.124-1.539 2.6-2.435.478-.897 1.071-2.278 1.817-4.17l8.792-24.766 8.751 24.89c.729 1.845 1.31 3.206 1.775 4.087.466.882 1.32 1.705 2.56 2.436 1.238.73 2.887 1.073 4.953 1.073 2.172 0 3.874-.357 5.077-1.115 1.203-.758 2.045-1.61 2.518-2.559.473-.948 1.027-2.394 1.692-4.293l9.825-28.234c.608-1.772.908-3.055.908-3.88 0-1.259-.638-2.325-1.899-3.178-1.261-.854-2.774-1.28-4.582-1.28-1.813 0-3.211.321-4.169.99-.958.67-1.615 1.399-1.981 2.189-.366.79-.744 1.834-1.115 3.095l-6.935 24.024-7.76-22.497c-.725-1.889-1.314-3.246-1.775-4.127-.46-.882-1.351-1.737-2.6-2.518-1.25-.782-2.992-1.156-5.243-1.156-2.213 0-3.942.361-5.242 1.114-1.3.753-2.23 1.636-2.766 2.6-.536.966-1.121 2.308-1.775 4.087l-7.719 22.497-6.976-24.189c-.545-1.834-1.253-3.294-2.105-4.416-.852-1.123-2.536-1.693-5.077-1.693zm95.064 0c-1.84 0-3.377.415-4.623 1.28-1.246.864-1.858 1.94-1.858 3.178 0 .926.308 2.209.908 3.88l9.825 28.234c.299.844.643 1.796 1.032 2.807.388 1.01.889 1.91 1.527 2.683.638.773 1.506 1.367 2.6 1.816 1.095.45 2.47.66 4.128.66 2.058 0 3.715-.372 4.954-1.114 1.239-.741 2.082-1.539 2.559-2.435.477-.897 1.07-2.278 1.816-4.17l8.792-24.766 8.751 24.89c.729 1.845 1.31 3.206 1.775 4.087.466.882 1.32 1.705 2.56 2.436 1.238.73 2.887 1.073 4.953 1.073 2.172 0 3.874-.357 5.077-1.115 1.203-.758 2.045-1.61 2.518-2.559.473-.948 1.027-2.394 1.692-4.293l9.825-28.234c.608-1.772.908-3.055.908-3.88 0-1.259-.638-2.325-1.9-3.178-1.26-.854-2.773-1.28-4.581-1.28-1.813 0-3.211.321-4.17.99-.957.67-1.614 1.399-1.98 2.189-.366.79-.744 1.834-1.115 3.095l-6.935 24.024-7.76-22.497c-.725-1.889-1.314-3.246-1.775-4.127-.46-.882-1.31-1.737-2.56-2.518-1.248-.782-2.991-1.156-5.241-1.156-2.213 0-3.984.361-5.284 1.114-1.3.753-2.23 1.636-2.766 2.6-.536.966-1.121 2.308-1.775 4.087l-7.719 22.497-6.976-24.189c-.545-1.834-1.212-3.294-2.064-4.416-.851-1.123-2.577-1.693-5.118-1.693zm95.064 0c-1.84 0-3.377.415-4.623 1.28-1.246.864-1.858 1.94-1.858 3.178 0 .926.308 2.209.908 3.88l9.825 28.234c.299.844.643 1.796 1.032 2.807.388 1.01.889 1.91 1.527 2.683.638.773 1.506 1.367 2.6 1.816 1.095.45 2.47.66 4.128.66 2.058 0 3.715-.372 4.954-1.114 1.239-.741 2.082-1.539 2.559-2.435.477-.897 1.112-2.278 1.857-4.17l8.751-24.766 8.751 24.89c.729 1.845 1.31 3.206 1.775 4.087.466.882 1.32 1.705 2.56 2.436 1.239.73 2.887 1.073 4.953 1.073 2.172 0 3.874-.357 5.077-1.115 1.203-.758 2.045-1.61 2.518-2.559.473-.948 1.027-2.394 1.693-4.293l9.824-28.234c.608-1.772.908-3.055.908-3.88 0-1.259-.597-2.325-1.858-3.178-1.261-.854-2.815-1.28-4.623-1.28-1.813 0-3.211.321-4.169.99-.958.67-1.615 1.399-1.981 2.189-.366.79-.744 1.834-1.115 3.095l-6.893 24.024-7.802-22.497c-.725-1.889-1.314-3.246-1.775-4.127-.46-.882-1.31-1.737-2.56-2.518-1.248-.782-2.99-1.156-5.241-1.156-2.213 0-3.983.361-5.284 1.114-1.3.753-2.23 1.636-2.766 2.6-.536.966-1.121 2.308-1.775 4.087l-7.719 22.497-6.934-24.189c-.546-1.834-1.254-3.294-2.105-4.416-.852-1.123-2.578-1.693-5.119-1.693zm-196.36 59.977c16.8 56.359 70.273 97.54 133.29 97.54 63.015 0 116.49-41.18 133.29-97.54h-19.525a113.925 113.925 0 0 1-6.687 15.397h-39.627c1.687-5.04 3.08-10.19 4.251-15.397h-18.864c-1.316 5.265-2.894 10.408-4.829 15.397h-40.989v-15.397H363.57v15.397h-37.439a156.462 156.462 0 0 1-4.375-15.397h-18.988a189.77 189.77 0 0 0 3.838 15.397H267.97a114.068 114.068 0 0 1-6.728-15.397H241.76zm38.347 33.889h33.146c6.765 15.648 15.735 29.624 27.285 40.246-24.318-7.034-45.277-21.308-60.431-40.246zm53.744 0h29.72v34.55c-12.01-7.613-22.055-19.75-29.72-34.55zm48.213 0h31.784c-8.07 13.489-18.564 25.159-31.784 33.683v-33.683zm53.042 0h34.88c-16.691 20.858-40.459 36.045-67.944 42.145 14.104-11.404 25.062-25.924 33.064-42.145z" color="#000" style="block-progression:tb;text-indent:0;text-transform:none;fill:url(#LogoImage)" transform="translate(-231.54 -388.91)" />
        </svg>

P.S All I want is to get the image as the SVG's background or fill, if you know any way to achieve this please tell me how.

CodePudding user response：

Either use a pattern in SVG or CSS. I rearranged a bit here and there, but the most important change was moving the fill property from CSS styling to the attribute fill.

Update

And then it is also importnat to add the viewBox attribute to the <pattern>. In the example the viewBox matches the size of the image and the width and height attributes are matching the same aspect ratio (more or less).

<svg viewBox="0 0 231 388" height="200" width="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="LogoImage" viewBox="0 0 949 534" width="89%" height="50%">
      <image href="https://cdn.pixabay.com/photo/2018/02/11/09/37/matrix-full-3145364_1280.jpg" width="949" height="534" />
    </pattern>
  </defs>
  <path d="M375.04 397.12c-62.102 0-114.99 39.991-132.59 95.105h19.648a113.343 113.343 0 0 1 7.306-15.727h37.811c-1.649 5.144-3.004 10.406-4.128 15.727h19.153c1.339-5.362 2.934-10.627 4.83-15.727h36.49v15.727h18.493v-15.727h39.42c2.122 5.104 3.904 10.361 5.408 15.727h19.153c-1.286-5.326-2.784-10.578-4.623-15.727h39.256a113.303 113.303 0 0 1 7.306 15.727h19.607c-17.598-55.114-70.442-95.105-132.54-95.105zm27.904 21.754c25.884 5.952 48.491 19.91 64.848 39.132H433.49c-7.66-14.821-17.811-28.198-30.546-39.132zm-61.215 1.362c-11.464 10.641-20.506 23.525-27.244 37.77h-32.197c15.209-17.874 35.816-31.194 59.44-37.77zm40.329 5.944c12.192 8.346 22.03 19.352 29.844 31.825h-29.844V426.18zm-18.493.124v31.702h-27.863c7.158-12.502 16.297-23.48 27.863-31.702zm-115.58 83.795c-1.84 0-3.377.415-4.623 1.28-1.246.864-1.858 1.94-1.858 3.178 0 .926.267 2.209.867 3.88l9.824 28.234c.3.844.644 1.796 1.032 2.807.389 1.01.931 1.91 1.569 2.683.638.773 1.506 1.367 2.6 1.816 1.095.45 2.47.66 4.128.66 2.058 0 3.673-.372 4.912-1.114 1.24-.741 2.124-1.539 2.6-2.435.478-.897 1.071-2.278 1.817-4.17l8.792-24.766 8.751 24.89c.729 1.845 1.31 3.206 1.775 4.087.466.882 1.32 1.705 2.56 2.436 1.238.73 2.887 1.073 4.953 1.073 2.172 0 3.874-.357 5.077-1.115 1.203-.758 2.045-1.61 2.518-2.559.473-.948 1.027-2.394 1.692-4.293l9.825-28.234c.608-1.772.908-3.055.908-3.88 0-1.259-.638-2.325-1.899-3.178-1.261-.854-2.774-1.28-4.582-1.28-1.813 0-3.211.321-4.169.99-.958.67-1.615 1.399-1.981 2.189-.366.79-.744 1.834-1.115 3.095l-6.935 24.024-7.76-22.497c-.725-1.889-1.314-3.246-1.775-4.127-.46-.882-1.351-1.737-2.6-2.518-1.25-.782-2.992-1.156-5.243-1.156-2.213 0-3.942.361-5.242 1.114-1.3.753-2.23 1.636-2.766 2.6-.536.966-1.121 2.308-1.775 4.087l-7.719 22.497-6.976-24.189c-.545-1.834-1.253-3.294-2.105-4.416-.852-1.123-2.536-1.693-5.077-1.693zm95.064 0c-1.84 0-3.377.415-4.623 1.28-1.246.864-1.858 1.94-1.858 3.178 0 .926.308 2.209.908 3.88l9.825 28.234c.299.844.643 1.796 1.032 2.807.388 1.01.889 1.91 1.527 2.683.638.773 1.506 1.367 2.6 1.816 1.095.45 2.47.66 4.128.66 2.058 0 3.715-.372 4.954-1.114 1.239-.741 2.082-1.539 2.559-2.435.477-.897 1.07-2.278 1.816-4.17l8.792-24.766 8.751 24.89c.729 1.845 1.31 3.206 1.775 4.087.466.882 1.32 1.705 2.56 2.436 1.238.73 2.887 1.073 4.953 1.073 2.172 0 3.874-.357 5.077-1.115 1.203-.758 2.045-1.61 2.518-2.559.473-.948 1.027-2.394 1.692-4.293l9.825-28.234c.608-1.772.908-3.055.908-3.88 0-1.259-.638-2.325-1.9-3.178-1.26-.854-2.773-1.28-4.581-1.28-1.813 0-3.211.321-4.17.99-.957.67-1.614 1.399-1.98 2.189-.366.79-.744 1.834-1.115 3.095l-6.935 24.024-7.76-22.497c-.725-1.889-1.314-3.246-1.775-4.127-.46-.882-1.31-1.737-2.56-2.518-1.248-.782-2.991-1.156-5.241-1.156-2.213 0-3.984.361-5.284 1.114-1.3.753-2.23 1.636-2.766 2.6-.536.966-1.121 2.308-1.775 4.087l-7.719 22.497-6.976-24.189c-.545-1.834-1.212-3.294-2.064-4.416-.851-1.123-2.577-1.693-5.118-1.693zm95.064 0c-1.84 0-3.377.415-4.623 1.28-1.246.864-1.858 1.94-1.858 3.178 0 .926.308 2.209.908 3.88l9.825 28.234c.299.844.643 1.796 1.032 2.807.388 1.01.889 1.91 1.527 2.683.638.773 1.506 1.367 2.6 1.816 1.095.45 2.47.66 4.128.66 2.058 0 3.715-.372 4.954-1.114 1.239-.741 2.082-1.539 2.559-2.435.477-.897 1.112-2.278 1.857-4.17l8.751-24.766 8.751 24.89c.729 1.845 1.31 3.206 1.775 4.087.466.882 1.32 1.705 2.56 2.436 1.239.73 2.887 1.073 4.953 1.073 2.172 0 3.874-.357 5.077-1.115 1.203-.758 2.045-1.61 2.518-2.559.473-.948 1.027-2.394 1.693-4.293l9.824-28.234c.608-1.772.908-3.055.908-3.88 0-1.259-.597-2.325-1.858-3.178-1.261-.854-2.815-1.28-4.623-1.28-1.813 0-3.211.321-4.169.99-.958.67-1.615 1.399-1.981 2.189-.366.79-.744 1.834-1.115 3.095l-6.893 24.024-7.802-22.497c-.725-1.889-1.314-3.246-1.775-4.127-.46-.882-1.31-1.737-2.56-2.518-1.248-.782-2.99-1.156-5.241-1.156-2.213 0-3.983.361-5.284 1.114-1.3.753-2.23 1.636-2.766 2.6-.536.966-1.121 2.308-1.775 4.087l-7.719 22.497-6.934-24.189c-.546-1.834-1.254-3.294-2.105-4.416-.852-1.123-2.578-1.693-5.119-1.693zm-196.36 59.977c16.8 56.359 70.273 97.54 133.29 97.54 63.015 0 116.49-41.18 133.29-97.54h-19.525a113.925 113.925 0 0 1-6.687 15.397h-39.627c1.687-5.04 3.08-10.19 4.251-15.397h-18.864c-1.316 5.265-2.894 10.408-4.829 15.397h-40.989v-15.397H363.57v15.397h-37.439a156.462 156.462 0 0 1-4.375-15.397h-18.988a189.77 189.77 0 0 0 3.838 15.397H267.97a114.068 114.068 0 0 1-6.728-15.397H241.76zm38.347 33.889h33.146c6.765 15.648 15.735 29.624 27.285 40.246-24.318-7.034-45.277-21.308-60.431-40.246zm53.744 0h29.72v34.55c-12.01-7.613-22.055-19.75-29.72-34.55zm48.213 0h31.784c-8.07 13.489-18.564 25.159-31.784 33.683v-33.683zm53.042 0h34.88c-16.691 20.858-40.459 36.045-67.944 42.145 14.104-11.404 25.062-25.924 33.064-42.145z" transform="translate(-231.54 -388.91)" fill="url(#LogoImage)" />
    
</svg>