[英]SVG animation in wordpress - fill
I have got an easy animation which works on normal HTML site but not when I copy the code to wordpress post. 我有一个简单的动画,可以在普通的HTML网站上使用,但是当我将代码复制到wordpress发布时却无法使用。
I have creted a child theme, copied the style, copied the js. 我创建了一个子主题,复制了样式,复制了js。 And it does not work.
而且它不起作用。 I have checked before - jquery script worked.
我之前检查过-jQuery脚本有效。 I added a plugin "Add Full SVG Support".
我添加了一个插件“添加完整的SVG支持”。 Wordpress displays the SVG but somehow does not style it.
WordPress会显示SVG,但不显示其样式。
My HTML 我的HTML
<div class="icon-box">
<h3 class="text-box">TESTING</h3>
<a href="some link">
<img id="imgswap" class="img-btn svg" src="link to file/checkmark2.svg">
</a>
My CSS 我的CSS
svg {
width: 75px;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
fill: #016fa0;
}
svg:hover {
fill: #6c91a2;
}
My JS 我的JS
var $j = jQuery.noConflict();
$j('img.svg').each(function(){
var $img = $j(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
$j.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = $j(data).find('svg');
// Add replaced image's ID to the new SVG
if(typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
// Add replaced image's classes to the new SVG
if(typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass+' replaced-svg');
}
// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr('xmlns:a');
// Replace image with new SVG
$img.replaceWith($svg);
}, 'xml');
});
In your CSS, you need to specify that it is a class as svg is not a type of html tag - 在CSS中,您需要指定它是一个类,因为svg不是html标签的类型-
.svg {
width: 75px;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
fill: #016fa0;
}
.svg:hover {
fill: #6c91a2;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.