我希望我的 SVG 有一個影像作為它的fill屬性而不是純色，似乎我必須使用pattern和image屬性，但這些屬性似乎不是很直觀，因為無論我嘗試什么，模式都不會填充整個 SVG，除非影像具有與 te SVG 相同的縱橫比，我希望影像填充整個 SVG 我不介意它是否被拉伸或重復。這是我的代碼：
<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>PS 我想要的只是將影像作為 SVG 的背景或填充，如果您知道實作此目的的任何方法，請告訴我如何。
uj5u.com熱心網友回復：
使用 SVG 或 CSS 中的模式。我在這里和那里重新排列了一下，但最重要的變化是將 fill 屬性從 CSS 樣式移動到屬性fill。
更新
然后將 viewBox 屬性添加到<pattern>. 在示例中，viewBox 匹配影像的大小，并且寬度和高度屬性匹配相同的縱橫比（或多或少）。
<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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/385001.html
下一篇：減少svg圖中條形之間的間隙