admin管理员组文章数量:1125459
I'm trying to use a svg file that contains a vector and an image, the problem however is that the linked image in the svg won't load. The vector part of the svg is loading however. I figure the problem has to do with how wordpress loads its files. Both the image and the svg file are located in the image folder of my wordpress theme. I've tried linking to the file by using the file path with xlink:href="wp-content/themes/my-theme/assets/img/ulu-moskee.png" and xlink:href="wordpress/wp-content/themes/my-theme/assets/img/ulu-moskee.png". I've also tried linking to where the file is hosted with xlink:href="www.mysite/wp-content/themes/my-theme/assets/img/ulu-moskee.png" Despite these attempts, the image is still not loading. I'm seeking guidance on the correct path to use for xlink:href or any potential issues with how WordPress handles SVG images. Any insights or suggestions on resolving this issue would be greatly appreciated! Thanks in advance.
INDEX.PHP:
<div class="home"><img id="svg" src="<?php echo esc_url( get_template_directory_uri() . '/assets/img/ulu-home.svg' ); ?>" alt=""></div>
SVG FILE:
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="; width="1569.79" height="870.31" xmlns:xlink="; viewBox="0 0 1569.79 870.31">
<defs>
<style>
.cls-1 {
fill: #4483e2;
}
.cls-1, .cls-2, .cls-3 {
stroke-width: 0px;
}
.cls-2 {
fill: none;
}
.cls-3 {
fill: #4783e3;
}
.cls-4 {
clip-path: url(#clippath);
}
</style>
<clipPath id="clippath">
<path class="cls-2" d="m773.06,44.54c5.02,27.93,34.39,97.56,187.46,214.51,162.74,124.37,172.31,347.2,169.23,434.55,4.49,1.75,123.07,65,123.07,65h-479.75s-479.75,0-479.75,0c0,0,118.58-63.25,123.07-65-3.08-87.35,6.48-310.18,169.23-434.55,153.07-116.96,182.44-186.58,187.46-214.51Z"/>
</clipPath>
</defs>
<g class="cls-4">
<image width="1920" height="1040" transform="translate(0 20.01) scale(.82)" xlink:href="ulu-moskee.png"/>
</g>
<path class="cls-3" d="m793.8,30.39c-3.24,8.28-11.31,14.15-20.74,14.15-12.3,0-22.27-9.97-22.27-22.27s9.97-22.27,22.27-22.27c1.28,0,2.54.11,3.76.32-8.43,1.6-14.81,9.01-14.81,17.9,0,10.07,8.16,18.23,18.22,18.23,5.39,0,10.24-2.34,13.57-6.06Z"/>
<polygon class="cls-1" points="784.06 3.05 786.72 11.24 795.33 11.24 788.37 16.31 791.03 24.5 784.06 19.44 777.09 24.5 779.75 16.31 772.78 11.24 781.4 11.24 784.06 3.05"/>
</svg>
I'm trying to use a svg file that contains a vector and an image, the problem however is that the linked image in the svg won't load. The vector part of the svg is loading however. I figure the problem has to do with how wordpress loads its files. Both the image and the svg file are located in the image folder of my wordpress theme. I've tried linking to the file by using the file path with xlink:href="wp-content/themes/my-theme/assets/img/ulu-moskee.png" and xlink:href="wordpress/wp-content/themes/my-theme/assets/img/ulu-moskee.png". I've also tried linking to where the file is hosted with xlink:href="www.mysite.com/wp-content/themes/my-theme/assets/img/ulu-moskee.png" Despite these attempts, the image is still not loading. I'm seeking guidance on the correct path to use for xlink:href or any potential issues with how WordPress handles SVG images. Any insights or suggestions on resolving this issue would be greatly appreciated! Thanks in advance.
INDEX.PHP:
<div class="home"><img id="svg" src="<?php echo esc_url( get_template_directory_uri() . '/assets/img/ulu-home.svg' ); ?>" alt=""></div>
SVG FILE:
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="1569.79" height="870.31" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1569.79 870.31">
<defs>
<style>
.cls-1 {
fill: #4483e2;
}
.cls-1, .cls-2, .cls-3 {
stroke-width: 0px;
}
.cls-2 {
fill: none;
}
.cls-3 {
fill: #4783e3;
}
.cls-4 {
clip-path: url(#clippath);
}
</style>
<clipPath id="clippath">
<path class="cls-2" d="m773.06,44.54c5.02,27.93,34.39,97.56,187.46,214.51,162.74,124.37,172.31,347.2,169.23,434.55,4.49,1.75,123.07,65,123.07,65h-479.75s-479.75,0-479.75,0c0,0,118.58-63.25,123.07-65-3.08-87.35,6.48-310.18,169.23-434.55,153.07-116.96,182.44-186.58,187.46-214.51Z"/>
</clipPath>
</defs>
<g class="cls-4">
<image width="1920" height="1040" transform="translate(0 20.01) scale(.82)" xlink:href="ulu-moskee.png"/>
</g>
<path class="cls-3" d="m793.8,30.39c-3.24,8.28-11.31,14.15-20.74,14.15-12.3,0-22.27-9.97-22.27-22.27s9.97-22.27,22.27-22.27c1.28,0,2.54.11,3.76.32-8.43,1.6-14.81,9.01-14.81,17.9,0,10.07,8.16,18.23,18.22,18.23,5.39,0,10.24-2.34,13.57-6.06Z"/>
<polygon class="cls-1" points="784.06 3.05 786.72 11.24 795.33 11.24 788.37 16.31 791.03 24.5 784.06 19.44 777.09 24.5 779.75 16.31 772.78 11.24 781.4 11.24 784.06 3.05"/>
</svg>
1 Answer
Reset to default 0It doesn't seem to be a wordpress issue but it has to do with how recursion works in svg files see the answer to this question for more details. Like @tony-djukic replied the way to go is by embedding the image in the svg file.
本文标签： How do I link an image in a svg file in wordpress
版权声明：本文标题：How do I link an image in a svg file in wordpress? 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736666477a1946690.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
//:, or maybe the completehttps://to tell the browser that it's an absolute link. – Rup Commented Jan 31, 2024 at 23:51