css - 如何在 WordPress 中加载 SVG?

标签 css wordpress svg vector

我正在尝试将 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/

最佳答案

几个选项:

  1. 允许通过媒体 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 也可能包含不需要的代码。

  1. 我只能告诉 gutenberg 编辑器,但如果我添加自定义 HTML block 并在其中粘贴 SVG 代码,它对我有用。不确定经典编辑器。

  2. 通过 FTP/SFTP/SSH 将 SVG 手动上传到您的服务器并像链接一样

<img src="https://yourdomain/the/folder/you/used/filename.svg">
  1. 要完成列表,即使它不适合您的情况,但对于小图标 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/

相关文章:

javascript - 如果至少有一个输入不是原始输入,我如何将 CSS 应用于链接,如果所有输入都是原始输入,如何撤消该更改?

CSS字体边框?

html - 防止菜单项在焦点上移动

wordpress - 如何在WordPress插件中动态编辑帖子

css - 如何显示可缩放 SVG 矩形内的 SVG 元素的工具提示?

svg - 避免在相邻的SVG矩形之间形成线条

html - 在相邻元素之间添加边距而不向父容器添加内边距

html - 使用 Less 创建文本危险应用于面板时的默认样式

php - IIS WordPress 导致 Curl 错误 18

graphics - 有(流行)网站上使用 SVG 的示例吗?