如何获取图像作为 SVG 填充的背景

Posted 2023-03-06

【中文标题】如何获取图像作为 SVG 填充的背景

【英文标题】：How to get an image as the SVG fill's background

【发布时间】：2022-01-18 10:09:46

【问题描述】：

我希望我的 SVG 有一个图像，因为它的 fill 属性而不是纯色，看来我必须使用 pattern 和 image 属性，但它们的行为似乎不是很直观，因为没有无论我尝试什么，除非图像具有与 te SVG 相同的纵横比，否则该模式永远不会填充整个 SVG，我希望图像填充整个 SVG 我不介意它是否被拉伸或重复。这是我的代码：

        <svg viewBox="0 0 286.91 286.91"   xmlns="http://www.w3.org/2000/svg">
            <defs>
                <pattern id="LogoImage"  >
                    <image href="https://cdn.pixabay.com/photo/2018/02/11/09/37/matrix-full-3145364_1280.jpg"   />
                </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 我想要的只是将图像作为 SVG 的背景或填充，如果您知道实现此目的的任何方法，请告诉我。

【问题讨论】：

也可以使用路径作为图片的剪切路径

【参考方案1】：

在 SVG 或 CSS 中使用模式。我在这里和那里重新安排了一下，但最重要的变化是将填充属性从 CSS 样式移动到属性 fill。

更新

然后将 viewBox 属性添加到<pattern> 也很重要。在示例中，viewBox 匹配图像的大小，并且宽度和高度属性匹配相同的纵横比（或多或少）。

<svg viewBox="0 0 231 388"   xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="LogoImage" viewBox="0 0 949 534"  >
      <image href="https://cdn.pixabay.com/photo/2018/02/11/09/37/matrix-full-3145364_1280.jpg"   />
    </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>

【讨论】：

这行得通，你让我意识到如果我不在我的pattern 元素上使用viewBox，图像将永远无法正确缩放......我认为这就是width &height 属性在哪里，但我现在看到需要viewBox。非常感谢。

@ArpadFlandorffer 是对的。我用一个解释更新了我的答案。