projekte
/
oho
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

set color with css for svg icons. JQuery is needed!

This commit is contained in:
bmen 2019-04-14 21:37:20 +02:00
parent 1da9185337
commit 70c75f080c
2 changed files with 125 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
index.html
View File

@ -36,6 +36,44 @@
});
});
</script>
<script>
$(function(){
jQuery('img.svg').each(function(){
var $img = jQuery(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
jQuery.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = jQuery(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');
// Check if the viewport is set, else we gonna set it if we can.
if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
$svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
}
// Replace image with new SVG
$img.replaceWith($svg);
}, 'xml');
});
});
</script>
</head>
<body>
<!--
@ -139,10 +177,10 @@
</div>
</div>
<ul>
<li><i class="fas fa-language"></i> DE,EN</li>
<li><img src="img/OSH_logo.svg" width="16" /></li>
<li><img style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
<li><i class="fas fa-book-open"></i></li>
<li class="lang"><i class="fas fa-language"></i> DE,EN</li>
<li class="cert"><img class="svg" src="img/OSH_logo.svg" width="16" /></li>
<li class="din"><img class="svg" style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
<li class="doc"><i class="fas fa-book-open"></i></li>
</ul>
<div class="clearer">&nbsp;</div>
<div class="search-results-variante3-item-meta-date">
@ -176,10 +214,10 @@
</div>
</div>
<ul>
<li><i class="fas fa-language"></i> DE,EN</li>
<li><img src="img/OSH_logo.svg" width="16" /></li>
<li><img style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
<li><i class="fas fa-book-open"></i></li>
<li class="lang"><i class="fas fa-language"></i> DE,EN</li>
<li class="cert"><img class="svg" src="img/OSH_logo.svg" width="16" /></li>
<li class="din"><img class="svg" style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
<li class="doc"><i class="fas fa-book-open"></i></li>
</ul>
<div class="clearer">&nbsp;</div>
<div class="search-results-variante3-item-meta-date">
@ -213,10 +251,10 @@
</div>
</div>
<ul>
<li><i class="fas fa-language"></i> DE,EN</li>
<li><img src="img/OSH_logo.svg" width="16" /></li>
<li><img style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
<li><i class="fas fa-book-open"></i></li>
<li class="lang"><i class="fas fa-language"></i> DE,EN</li>
<li class="cert"><img class="svg" src="img/OSH_logo.svg" width="16" /></li>
<li class="din"><img class="svg" style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
<li class="doc"><i class="fas fa-book-open"></i></li>
</ul>
<div class="clearer">&nbsp;</div>
<div class="search-results-variante3-item-meta-date">
@ -250,10 +288,10 @@
</div>
</div>
<ul>
<li><i class="fas fa-language"></i> DE,EN</li>
<li><img src="img/OSH_logo.svg" width="16" /></li>
<li><img style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
<li><i class="fas fa-book-open"></i></li>
<li class="lang"><i class="fas fa-language"></i> DE,EN</li>
<li class="cert"><img class="svg" src="img/OSH_logo.svg" width="16" /></li>
<li class="din"><img class="svg" style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
<li class="doc"><i class="fas fa-book-open"></i></li>
</ul>
<div class="clearer">&nbsp;</div>
<div class="search-results-variante3-item-meta-date">
@ -287,10 +325,10 @@
</div>
</div>
<ul>
<li><i class="fas fa-language"></i> DE,EN</li>
<li><img src="img/OSH_logo.svg" width="16" /></li>
<li><img style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
<li><i class="fas fa-book-open"></i></li>
<li class="lang"><i class="fas fa-language"></i> DE,EN</li>
<li class="cert"><img class="svg" src="img/OSH_logo.svg" width="16" /></li>
<li class="din"><img class="svg" style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
<li class="doc"><i class="fas fa-book-open"></i></li>
</ul>
<div class="clearer">&nbsp;</div>
<div class="search-results-variante3-item-meta-date">
@ -324,10 +362,47 @@
</div>
</div>
<ul>
<li><i class="fas fa-language"></i> DE,EN</li>
<li><img src="img/OSH_logo.svg" width="16" /></li>
<li><img style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
<li><i class="fas fa-book-open"></i></li>
<li class="lang"><i class="fas fa-language"></i> DE,EN</li>
<li class="cert"><img class="svg" src="img/OSH_logo.svg" width="16" /></li>
<li class="din"><img class="svg" style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
<li class="doc"><i class="fas fa-book-open"></i></li>
</ul>
<div class="clearer">&nbsp;</div>
<div class="search-results-variante3-item-meta-date">
<span class="updated">Updated: 03/27/19</span>
<span class="released">Released: 04/12/15</span>
</div>
<div class="clearer">&nbsp;</div>
</div>
</div>
</div>
<div class="col-1-4-fixed">
<div class="search-results-variante3-item">
<div class="search-results-variante3-item-img">
<a href="detail.html"><img src="img/thumb07.jpg" /></a>
</div>
<div class="search-results-variante3-item-info">
<h2><span>Aserradero portatil Bolport Rm100</span></h2>
<p class="search-results-variante3-item-description">Lorem ipsum dolor sit amet, consetetur saidispscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore a magna aliquyam ...</p>
</div>
<div class="search-results-variante3-item-meta">
<div class="search-results-variante3-item-meta-status">
<p>Status</p>
<svg height="30" width="30">
<circle cx="15" cy="15" r="10" stroke="#296178" stroke-width="6" fill="#fff" />
</svg>
</div>
<div class="search-results-variante3-item-meta-compl">
<p>Completeness</p>
<div class="search-results-variante3-item-meta-compl-bar">
<span style="width:25%"></span>
</div>
</div>
<ul>
<li class="lang"><i class="fas fa-language"></i> DE,EN</li>
<li class="cert"><img class="svg" src="img/OSH_logo.svg" width="16" /></li>
<li class="din"><img class="svg" style="margin-top:-2px;" src="img/DIN_logo.svg" width="20" /></li>
<li class="doc"><i class="fas fa-book-open"></i></li>
</ul>
<div class="clearer">&nbsp;</div>
<div class="search-results-variante3-item-meta-date">

14
style.css
View File

@ -669,9 +669,15 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fef0e4', end
}
.search-results-variante3-item .search-results-variante3-item-meta li {
}
.search-results-variante3-item .search-results-variante3-item-meta li svg {
background-color: red;
fill: currentColor;
.search-results-variante3-item .search-results-variante3-item-meta li.cert svg {
width: 16px;
}
.search-results-variante3-item .search-results-variante3-item-meta li.din svg {
margin-top:-2px;
width: 20px;
}
.search-results-variante3-item .search-results-variante3-item-meta li svg path {
fill: #296178 !important;
}
.search-results-variante3-item:hover .search-results-variante3-item-meta li {
padding:2px 11px;
@ -725,7 +731,7 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fef0e4', end
.search-results-variante3-item .search-results-variante3-item-meta .search-results-variante3-item-meta-date .released {
float:right;
}
.search-results-variante3 svg {
.search-results-variante3 .search-results-variante3-item-meta-status svg {
transform: rotate(-90deg);
stroke-dasharray: 251; /* (2PI * 40px) */
stroke-dashoffset: 251;