繁体   English   中英

使用背景图像填充 SVG 路径不适用于文件夹中的图像

[英]Fill SVG path with a background-image doesnt work for image from folder

我用图像填充了 svg 路径,它仅适用于 url,但不适用于图片,与 svg 位于同一文件夹中的内容。 我在哪里犯错了?

<image href="ev.png" width="200" height="150" />

我尝试将图像上传到 web 并且效果很好,所以我想错误会影响我如何管理文件夹中的图片?

这是一个非常有用的帖子

 .st0{fill:#6D2D39;}.st1{fill:url(#img1);}
 <svg viewBox="0 0 200 150" > <style> </style> <g> <path class="st0" d="M96,9.1c-2.4,0.2-4.8,0.5-7.2,1c-2.5,0.5-4.9,1.1-7.2,1.9c-2.4,0.8-4.9,1.9-7.2,3c-2.5,1.2-4.9,2.7-7.2,4.3 c-2.5,1.8-4.9,3.7-7.2,5.9c0,0-0.8,0.8-1.6,1.6c-1.3,0-13.6,0-13.6,0c-1.3,0-2.7,0.2-4,0.6c-3.6,1.1-6.7,3.5-8.6,6.8 c-1.3,2.2-1.9,4.7-1.9,7.2c0,0,0,1.3,0,2.7c-1.2,0.1-2.3,0.3-3.4,0.8C22,46.6,19,50.9,19,55.7c0,0.3,0,0.7,0,1 c0.1,1.2,0.4,2.8,0.6,4.5c0.4,2.4,0.9,5.8,0.9,7.9c0,0.5,0,0.9-0.1,1.3c-0.2,0.7-0.6,1.4-1.3,2c-0.6,0.5-1,0.7-1.1,0.7 c-1,0.5-1.7,1.6-1.7,2.7c0,0,0,0.1,0,0.1c0.1,1.2,0.8,2.3,1.9,2.7c0,0,0.5,0.2,1,0.6c0.4,0.3,0.9,0.7,1,1.3 c0.1,0.4,0.1,0.9,0.1,1.4c0,2.3-0.5,5.8-0.9,8.4c-0.3,1.7-0.5,3.4-0.6,4.6c0,0.3,0,0.6,0,0.9c0,4.7,3.1,9.1,7.9,11 c1.1,0.4,2.3,0.7,3.4,0.8c0,1.3,0,2.7,0,2.7c0,2.5,0.7,5,1.9,7.2c1.9,3.3,4.9,5.7,8.6,6.8c1.3,0.4,2.7,0.6,4,0.6c0,0,12.4,0,13.6,0 c0.7,0.7,1.6,1.6,1.6,1.6c2.2,2.1,4.6,4.1,7.2,5.9c2.3,1.6,4.7,3.1,7.2,4.3c2.3,1.2,4.8,2.2,7.2,3c2.3,0.8,4.7,1.5,7.2,1.9 c2.4,0.5,4.8,0.8,7.2,1c1.4,0.1,2.6,0.1,3.7,0.1c1.1,0,2.2,0,3.5-0.1c2.4-0.1,4.8-0.5,7.2-0.9c2.5-0.5,4.9-1.1,7.2-1.9 c2.4-0.8,4.8-1.8,7.2-3c2.5-1.2,4.9-2.7,7.2-4.3c2.5-1.7,4.9-3.7,7.2-5.8c0.7-0.7,1.3-1.2,1.9-1.8c1.2,0,13.6,0,13.6,0 c1.2,0,2.5-0.2,3.7-0.5c3.6-0.9,6.6-3.2,8.6-6.3c1.5-2.3,2.2-5,2.2-7.7c0,0,0-1.3,0-2.7c1.1-0.1,2.1-0.3,3.1-0.7 c4.9-1.9,8-6.2,8-11c0-0.3,0-0.6,0-0.9c-0.1-1.3-0.3-2.9-0.6-4.6c-0.4-2.5-0.9-6.1-0.9-8.4c0-0.6,0-1.1,0.1-1.4 c0.1-0.5,0.6-1,1-1.3c0.6-0.4,1.1-0.6,1.1-0.6c1.1-0.4,1.9-1.5,1.9-2.7c0,0,0-0.1,0-0.1c0-1.1-0.7-2.2-1.7-2.7c0,0-0.5-0.3-1.1-0.8 c0,0,0,0,0,0c-0.7-0.6-1.1-1.2-1.3-1.9c-0.1-0.3-0.1-0.7-0.1-1.3c0-2.1,0.5-5.5,0.9-7.9c0.3-1.7,0.5-3.3,0.6-4.5c0-0.3,0-0.7,0-1 c0-4.8-3.1-9.1-8-10.9c-1-0.4-2.1-0.6-3.1-0.7c0-1.3,0-2.7,0-2.7c0-2.7-0.8-5.4-2.2-7.7c-2-3.1-5-5.4-8.6-6.3 c-1.2-0.3-2.5-0.5-3.7-0.5c0,0-12.4,0-13.6,0c-0.6-0.6-1.2-1.2-1.9-1.8c-2.2-2.1-4.7-4.1-7.2-5.8c-2.3-1.6-4.7-3-7.2-4.3 c-2.4-1.2-4.8-2.2-7.2-3c-2.3-0.8-4.7-1.4-7.2-1.9c-2.4-0.5-4.8-0.8-7.2-0.9c-1.3-0.1-2.4-0.1-3.5-0.1C98.6,8.9,97.4,9,96,9.1z M26.3,71.7c0.2-0.8,0.3-1.6,0.3-2.6c0-2.3-0.4-5.3-1-8.8c-0.3-1.6-0.5-3.1-0.6-4.1c0-0.2,0-0.3,0-0.5c0-2.6,2-4.5,4.1-5.4 c0.8-0.3,1.7-0.5,2.6-0.5h1.7c1.6,0,3-1.3,3-3v-5.5c0-1.5,0.4-3,1.1-4.3c1.1-2,2.9-3.4,5.1-4c0.8-0.2,1.6-0.3,2.4-0.3h14.9 c0.8,0,1.6-0.4,2.2-0.9l2.3-2.3c2-1.9,4.2-3.7,6.5-5.3c2.1-1.5,4.3-2.8,6.5-3.9c2.1-1.1,4.3-2,6.5-2.7c2.1-0.7,4.2-1.3,6.4-1.7 c2.1-0.4,4.3-0.7,6.4-0.9c1.3-0.1,2.3-0.1,3.3-0.1c1,0,2,0,3.1,0.1c2.1,0.1,4.3,0.4,6.4,0.8c2.2,0.4,4.4,1,6.4,1.7 c2.1,0.7,4.3,1.6,6.5,2.7c2.2,1.1,4.4,2.4,6.5,3.8c2.3,1.6,4.4,3.3,6.5,5.2c1,0.9,1.8,1.7,2.5,2.5c0.6,0.6,1.3,0.9,2.2,0.9h14.9 c0.7,0,1.4,0.1,2.2,0.3c2.1,0.6,3.9,1.9,5.1,3.7c0.9,1.4,1.3,2.9,1.3,4.5v5.5c0,1.6,1.3,3,3,3h1.5c0.8,0,1.7,0.2,2.5,0.5 c2.1,0.8,4.1,2.8,4.1,5.4c0,0.2,0,0.3,0,0.5c-0.1,1-0.3,2.5-0.6,4.1c-0.6,3.6-1,6.5-1,8.8c0,1,0.1,1.9,0.3,2.6c0.3,1.4,1,2.7,2,3.9 c-1,1-1.6,2.2-1.9,3.5c-0.2,0.8-0.3,1.7-0.3,2.8c0,2.4,0.4,5.5,1,9.2c0.2,1.6,0.5,3.2,0.6,4.3c0,0.2,0,0.3,0,0.4 c0,2.6-2,4.6-4.1,5.4c-0.8,0.3-1.7,0.5-2.5,0.5h-1.5c-1.6,0-3,1.3-3,3v5.5c0,1.6-0.5,3.2-1.3,4.5c-1.2,1.9-3,3.2-5.1,3.7 c-0.7,0.2-1.5,0.3-2.2,0.3h-14.9c-0.8,0-1.6,0.3-2.2,0.9c-0.7,0.8-1.5,1.6-2.5,2.5c-2,1.9-4.2,3.7-6.5,5.2 c-2.1,1.4-4.3,2.7-6.5,3.8c-2.1,1.1-4.3,2-6.5,2.7c-2,0.7-4.2,1.3-6.4,1.7c-2.2,0.4-4.3,0.7-6.4,0.8c-1.1,0.1-2.2,0.1-3.1,0.1 c-1,0-2.1,0-3.3-0.1c-2.1-0.1-4.3-0.4-6.4-0.9c-2.2-0.4-4.4-1-6.4-1.7c-2.2-0.8-4.4-1.7-6.5-2.7c-2.2-1.1-4.4-2.4-6.5-3.9 c-2.3-1.6-4.5-3.4-6.5-5.3l-2.3-2.3c-0.6-0.6-1.4-0.9-2.2-0.9H44.8c-0.8,0-1.6-0.1-2.4-0.3c-2.2-0.6-4-2-5.1-4 c-0.7-1.3-1.1-2.8-1.1-4.3v-5.5c0-1.6-1.3-3-3-3h-1.7c-0.9,0-1.7-0.2-2.6-0.5c-2.1-0.8-4.1-2.8-4.1-5.4c0-0.1,0-0.3,0-0.4 c0.1-1.1,0.3-2.6,0.6-4.3c0.5-3.7,1-6.8,1-9.2c0-1-0.1-2-0.3-2.8c-0.3-1.3-1-2.5-1.9-3.5C25.3,74.4,26,73.1,26.3,71.7z"/> <radialGradient id="SVGID_1_" cx="99.6511" cy="75.7617" r="72.5315" gradientUnits="userSpaceOnUse"> <stop offset="0" style="stop-color:#FFFFFC"/> <stop offset="0.5" style="stop-color:#FFFFFC"/> <stop offset="1" style="stop-color:#F3EEE2"/> </radialGradient> <defs> <pattern id="img1" patternUnits="userSpaceOnUse" x="0" y="0" width="200" height="150"> <image href="https://picsum.photos/400/300 " width="200" height="150" /> </pattern> </defs> <path class="st1" d="M178.1,74.5c-0.9-0.8-1.8-1.9-2.2-3.5c-0.7-3.2,1-11,1.4-14.6c0.4-4-2.3-7.5-6-8.9c-1.1-0.4-2.3-0.7-3.6-0.7 h-1.5v-5.5c0-2.3-0.7-4.4-1.8-6.1c-1.5-2.5-4-4.3-6.8-5c-0.9-0.3-1.9-0.4-3-0.4h-3.9H144h-4.2c-0.9-0.9-1.7-1.8-2.6-2.6 c-2.1-2-4.4-3.9-6.8-5.5c-2.2-1.5-4.5-2.9-6.8-4c-2.2-1.1-4.5-2.1-6.8-2.9c-2.2-0.8-4.5-1.3-6.8-1.8c-2.2-0.4-4.5-0.7-6.8-0.9 c-1.1-0.1-2.2-0.1-3.3-0.1c-1.2,0-2.4,0.1-3.5,0.1c-2.3,0.2-4.6,0.5-6.8,0.9c-2.3,0.5-4.6,1.1-6.8,1.8c-2.3,0.8-4.6,1.8-6.8,2.9 c-2.4,1.2-4.6,2.6-6.8,4.1c-2.4,1.7-4.7,3.5-6.8,5.6c-0.8,0.8-1.6,1.6-2.4,2.4h-4.4h-6.8h-3.6c-1.1,0-2.2,0.2-3.2,0.5 c-2.9,0.8-5.3,2.8-6.8,5.4c-1,1.7-1.5,3.6-1.5,5.7v5.5h-1.7c-1.3,0-2.5,0.3-3.6,0.7c-3.6,1.4-6.3,4.9-5.9,8.9 c0.3,3.7,2.1,11.5,1.4,14.6c-0.4,1.6-1.4,2.8-2.3,3.6c-0.9,0.8-1.7,1.2-1.7,1.2s0.8,0.3,1.7,0.9c0.9,0.6,1.9,1.7,2.2,3.1 c0.7,3.3-1,11.5-1.3,15.3c-0.3,4,2.3,7.5,5.9,8.9c1.1,0.4,2.4,0.7,3.6,0.7h1.7v5.5c0,2.1,0.6,4,1.5,5.7c1.5,2.6,3.9,4.5,6.8,5.4 c1,0.3,2.1,0.5,3.2,0.5h3.6h6.8h4.4c0.8,0.8,1.6,1.6,2.4,2.4c2.1,2,4.4,3.9,6.8,5.6c2.2,1.5,4.5,2.9,6.8,4.1 c2.2,1.1,4.5,2.1,6.8,2.9c2.2,0.8,4.5,1.4,6.8,1.8c2.2,0.4,4.5,0.8,6.8,0.9c1.2,0.1,2.3,0.1,3.5,0.1c1.1,0,2.2,0,3.3-0.1 c2.3-0.1,4.6-0.4,6.8-0.9c2.3-0.5,4.6-1,6.8-1.8c2.3-0.8,4.6-1.8,6.8-2.9c2.4-1.2,4.6-2.5,6.8-4c2.4-1.7,4.7-3.5,6.8-5.5 c0.9-0.8,1.8-1.7,2.6-2.6h4.2h6.8h3.9c1,0,2-0.1,3-0.4c2.9-0.8,5.3-2.6,6.8-5c1.1-1.8,1.8-3.9,1.8-6.1v-5.5h1.5 c1.2,0,2.4-0.2,3.6-0.7c3.7-1.4,6.4-4.9,6-8.9c-0.3-3.8-2.1-12-1.3-15.3c0.3-1.4,1.2-2.4,2.1-3c0.9-0.7,1.8-1,1.8-1 S179.1,75.4,178.1,74.5z"/> <g> <path class="st0" d="M96.4,14.5L96.4,14.5c-2.2,0.1-4.3,0.4-6.5,0.9c-2.2,0.4-4.4,1-6.5,1.8c-2.2,0.8-4.4,1.7-6.5,2.8 c-2.2,1.1-4.4,2.4-6.5,3.9c-2.3,1.6-4.5,3.4-6.5,5.3l-2.3,2.3c-0.5,0.5-1.2,0.8-1.8,0.8H44.8c-0.8,0-1.7,0.1-2.5,0.4 c-2.3,0.7-4.2,2.2-5.4,4.2c-0.8,1.4-1.2,2.9-1.2,4.5v5.5c0,1.4-1.1,2.5-2.5,2.5h-1.7c-0.9,0-1.8,0.2-2.7,0.5 c-2,0.8-4.4,2.8-4.4,5.8l0,0.5c0.1,1,0.3,2.6,0.6,4.1c0.5,3.4,1,6.4,1,8.8c0,1-0.1,1.8-0.2,2.5c-0.3,1.3-0.9,2.6-1.9,3.7l-0.3,0.3 l0.3,0.3c0.9,1,1.5,2.1,1.8,3.3c0.2,0.7,0.2,1.6,0.2,2.7c0,2.4-0.4,5.6-1,9.1c-0.2,1.6-0.5,3.2-0.6,4.3l0,0.5 c0,3.1,2.4,5.1,4.4,5.9c0.9,0.4,1.8,0.5,2.7,0.5h1.7c1.4,0,2.5,1.1,2.5,2.5v5.5c0,1.6,0.4,3.1,1.2,4.5c1.2,2.1,3.1,3.6,5.4,4.2 c0.8,0.2,1.7,0.4,2.5,0.4h14.9c0.6,0,1.3,0.3,1.8,0.8l2.3,2.3c2,1.9,4.2,3.7,6.6,5.4c2.1,1.5,4.3,2.8,6.5,3.9 c2.1,1.1,4.3,2,6.5,2.8c2.1,0.7,4.3,1.3,6.5,1.8c2.2,0.4,4.3,0.7,6.5,0.9c1.3,0.1,2.4,0.1,3.4,0.1l3.1-0.1 c2.1-0.1,4.3-0.4,6.5-0.8c2.3-0.4,4.5-1,6.5-1.7c2.2-0.7,4.4-1.7,6.5-2.7c2.2-1.1,4.4-2.4,6.5-3.9c2.3-1.6,4.5-3.4,6.5-5.3 c1-0.9,1.8-1.7,2.5-2.5c0.5-0.5,1.1-0.8,1.8-0.8h14.9c0.8,0,1.5-0.1,2.3-0.3c2.2-0.6,4.1-2,5.4-4c0.9-1.4,1.4-3.1,1.4-4.8v-5.5 c0-1.4,1.1-2.5,2.5-2.5h1.5c0.9,0,1.8-0.2,2.7-0.5c2.1-0.8,4.5-2.8,4.5-5.9l0-0.5c-0.1-1.1-0.3-2.7-0.6-4.3c-0.5-3.6-1-6.7-1-9.1 c0-1.1,0.1-1.9,0.2-2.7c0.3-1.2,0.9-2.3,1.8-3.3l0.3-0.3l-0.3-0.3c-0.9-1.1-1.6-2.4-1.9-3.7c-0.2-0.7-0.2-1.5-0.2-2.5 c0-2.3,0.4-5.3,1-8.8c0.3-1.6,0.5-3.1,0.6-4.1l0-0.5c0-3.1-2.4-5.1-4.5-5.8c-0.9-0.3-1.8-0.5-2.7-0.5h-1.5c-1.4,0-2.5-1.1-2.5-2.5 v-5.5c0-1.7-0.5-3.4-1.4-4.8c-1.2-2-3.1-3.4-5.4-4c-0.8-0.2-1.6-0.3-2.3-0.3h-14.9c-0.7,0-1.3-0.3-1.8-0.8 c-0.7-0.8-1.5-1.6-2.5-2.5c-2.1-1.9-4.3-3.7-6.5-5.3c-2.1-1.5-4.3-2.8-6.5-3.9c-2.2-1.1-4.3-2-6.5-2.7c-2.1-0.7-4.3-1.3-6.5-1.7 c-2.2-0.4-4.4-0.7-6.5-0.8l-3.1-0.1C98.7,14.4,97.7,14.4,96.4,14.5z M99.7,15.4l3.1,0.1c2.1,0.1,4.2,0.4,6.4,0.8 c2.2,0.4,4.4,1,6.4,1.7c2.1,0.7,4.3,1.6,6.4,2.7c2.2,1.1,4.3,2.4,6.4,3.8c2.2,1.6,4.4,3.3,6.4,5.2c1,0.9,1.8,1.7,2.5,2.5 c0.7,0.7,1.6,1.1,2.5,1.1h14.9c0.7,0,1.4,0.1,2.1,0.3c2,0.5,3.7,1.8,4.8,3.5c0.8,1.3,1.2,2.8,1.2,4.3v5.5c0,1.9,1.6,3.5,3.5,3.5 h1.5c0.8,0,1.6,0.1,2.3,0.4c1.8,0.7,3.8,2.4,3.8,4.9l0,0.4c-0.1,1-0.3,2.5-0.6,4.1c-0.5,3.5-1,6.5-1,8.9l0,0c0,1.1,0.1,2,0.3,2.7 c0.3,1.4,0.9,2.6,1.8,3.8c-0.9,1.1-1.5,2.2-1.8,3.5c-0.2,0.8-0.3,1.8-0.3,2.9l0,0c0,2.5,0.4,5.7,1,9.3c0.2,1.6,0.5,3.2,0.6,4.2 c0,0,0,0.4,0,0.4c0,2.4-1.9,4.2-3.8,5c-0.8,0.3-1.5,0.4-2.3,0.4h-1.5c-1.9,0-3.5,1.6-3.5,3.5v5.5c0,1.5-0.4,3-1.2,4.3 c-1.1,1.7-2.8,3-4.8,3.5c-0.7,0.2-1.4,0.3-2.1,0.3h-14.9c-1,0-1.9,0.4-2.5,1.1c-0.7,0.8-1.5,1.5-2.5,2.5c-2,1.9-4.2,3.6-6.4,5.2 c-2.1,1.4-4.2,2.7-6.4,3.8c-2.1,1.1-4.3,2-6.4,2.7c-2,0.7-4.2,1.2-6.4,1.7c-2.1,0.4-4.3,0.7-6.4,0.8l-3.1,0.1c-1,0-2,0-3.3-0.1 c-2.1-0.1-4.3-0.4-6.4-0.8c-2.2-0.4-4.3-1-6.4-1.7c-2.2-0.7-4.3-1.7-6.4-2.7c-2.2-1.1-4.3-2.4-6.4-3.8c-2.3-1.6-4.4-3.3-6.4-5.2 l-2.3-2.3c-0.7-0.7-1.6-1.1-2.5-1.1H44.8c-0.7,0-1.5-0.1-2.2-0.3c-2-0.6-3.7-1.9-4.8-3.8c-0.7-1.2-1.1-2.6-1.1-4v-5.5 c0-1.9-1.6-3.5-3.5-3.5h-1.7c-0.8,0-1.6-0.2-2.4-0.5c-1.9-0.7-3.8-2.6-3.8-4.9l0-0.4c0.1-1.1,0.3-2.6,0.6-4.2c0.5-3.6,1-6.8,1-9.3 c0-1.1-0.1-2.1-0.3-2.9c-0.3-1.2-0.9-2.4-1.8-3.5c0.9-1.2,1.5-2.4,1.8-3.8c0.2-0.8,0.3-1.7,0.3-2.7c0-2.4-0.5-5.5-1-8.9 c-0.2-1.6-0.5-3.1-0.6-4.1c0,0,0-0.4,0-0.4c0-2.5,2-4.2,3.8-4.9c0.8-0.3,1.6-0.5,2.4-0.5h1.7c1.9,0,3.5-1.6,3.5-3.5v-5.5 c0-1.4,0.4-2.8,1.1-4c1.1-1.8,2.8-3.2,4.8-3.8c0.8-0.2,1.5-0.3,2.2-0.3h14.9c0.9,0,1.8-0.4,2.5-1.1l2.3-2.3c2-1.9,4.2-3.7,6.4-5.2 c2.1-1.4,4.2-2.7,6.4-3.8c2.1-1.1,4.2-2,6.4-2.7c2-0.7,4.2-1.3,6.4-1.7c2.1-0.4,4.3-0.7,6.4-0.9C97.7,15.4,98.8,15.4,99.7,15.4z" /> </g> </g> </svg>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM