我正在尝试将 SVG 代码加载到 WordPress 页面中。 所以我终于在 JSfiddle 中设置了我想要的东西。 有一些 HTML 和 CSS。
但是我将如何在 WordPress 页面中加载它。最初我将 CSS 添加到我的子主题中并简单地将 html 代码粘贴到编辑器中,但这没有用。我试过 iframing 和其他一些东西,但我的技术知识太有限了。
有人知道解决方案吗?
第一次在这里提问。如果我遗漏了一些明显的东西,我深表歉意。
代码:
.hover_group:hover {
opacity: 1;
}
#projectsvg {
position: relative;
width: 100%;
padding-bottom: 77%;
vertical-align: middle;
margin: 0;
overflow: hidden;
}
#projectsvg svg {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
<figure id="projectsvg">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080" preserveAspectRatio="xMinYMin meet">
//set your background image
<image width="1920" height="1080" xlink:href="https://s1.thcdn.com/design-assets/images/nintendo/en/carousel/10881668/large/10881668-3.jpg">
</image>
<image id="estaca" width="120" height="120" xlink:href="https://portuguesewithcarla.com/temp/estaca.png" x="860" y="250" />
<g class="hover_group" opacity="0">
<a xlink:href="http://ptwithcarla.com">
<text x="760" y="380" font-size="40">NÍVEL UM</text>
<rect x="860" y="250" opacity="0.3" fill="#FFFFFF" width="120" height="120"></rect>
</a>
</g>
<g class="hover_group" opacity="0">
<a xlink:href="http://ptwithcarla.com">
<text x="960" y="680" font-size="40">NÍVEL DOIS</text>
<rect x="922" y="654.1" opacity="0.3" fill="#FFFFFF" width="64.6" height="300.8"></rect>
</a>
</g>
<image id="animal" width="80" height="80" xlink:href="https://media.giphy.com/media/182TlvsqrfvlH5dnFm/giphy.gif" x="25" y="550">
<animate
xlink:href="#animal"
attributeName="x"
from="600"
to="1100"
dur="6s"
begin="0s"
repeatCount="indefinite"
fill="freeze"
id="rect-anim"/>
</svg>
</figure>
本质上它的代码等同于这个:http://jsfiddle.net/wgh52j39/
最佳答案
几个选项:
- 允许通过媒体 uploader 将任何 SVG 作为图像上传 ba 将其添加到您的 functions.php 或插件中:
/**
1. Allow SVG files to be uploaded via Media Uploader
*/
add_filter( 'upload_mimes', function( $mime_types ) {
$mime_types['svg'] = 'image/svg+xml';
return $mime_types;
}, 1, 1 );
add_filter( 'wp_check_filetype_and_ext', function( $mime, $file, $filename, $mimes ) {
$wp_filetype = wp_check_filetype( $filename, $mimes );
if ( in_array( $wp_filetype['ext'], [ 'svg' ] ) ) {
$mime['ext'] = true;
$mime['type'] = true;
}
return $mime;
}, 10, 4 );
如果您的站点的管理员/作者不知道他们在做什么,这可能是一个安全问题,因为 SVG 也可能包含不需要的代码。
我只能告诉 gutenberg 编辑器,但如果我添加自定义 HTML block 并在其中粘贴 SVG 代码,它对我有用。不确定经典编辑器。
通过 FTP/SFTP/SSH 将 SVG 手动上传到您的服务器并像链接一样
<img src="https://yourdomain/the/folder/you/used/filename.svg">
- 要完成列表,即使它不适合您的情况,但对于小图标 SVG,您可以将完整的 svg 编码为 CSS 作为背景图像,即通过 https://www.urlencoder.org/ :
.icon-heart { display: inline-block; width: 40px; height: 40px; background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23dd0000%22%20d%3D%22M21.3%2C3.3c-2.5-2.1-6.1-1.7-8.4%2C0.6L12%2C4.8l-0.9-0.9C8.9%2C1.6%2C5.2%2C1.2%2C2.7%2C3.3c-2.8%2C2.4-3%2C6.7-0.4%2C9.4l8.7%2C9%20c0.6%2C0.6%2C1.5%2C0.6%2C2%2C0l8.7-9C24.3%2C10%2C24.1%2C5.7%2C21.3%2C3.3L21.3%2C3.3z%22%2F%3E%3C%2Fsvg%3E); }
<span class="icon-heart"></span>
关于css - 如何在 WordPress 中加载 SVG?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57444413/