Skip to content

if use element has additional attributes, they will be copied to a new group element #122

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

if use element has additional attributes, they will be copied to a new group element #122

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 16 additions & 7 deletions dist/svg4everybody.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,31 @@
"function" == typeof define && define.amd ? // AMD. Register as an anonymous module unless amdModuleId is set
define([], function() {
return root.svg4everybody = factory();
}) : "object" == typeof exports ? module.exports = factory() : root.svg4everybody = factory();
}) : "object" == typeof exports ? // Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory() : root.svg4everybody = factory();
}(this, function() {
/*! svg4everybody v2.1.0 | github.com/jonathantneal/svg4everybody */
function embed(svg, target) {
function embed(use, svg, target) {
// if the target exists
if (target) {
// create a document fragment to hold the contents of the target
var fragment = document.createDocumentFragment(), viewBox = !svg.getAttribute("viewBox") && target.getAttribute("viewBox");
// copy additional USE attributes to G
for (var container = use.attributes.length > 1 ? document.createElementNS(svg.namespaceURI, "g") : document.createDocumentFragment(), i = 0; i < use.attributes.length; i++) {
"xlink:href" !== use.attributes[i].name && container.setAttribute(use.attributes[i].name, use.attributes[i].value);
}
// TODO if X/Y attributes are used with USE their value has to be respected too
// cache the closest matching viewBox
var viewBox = !svg.getAttribute("viewBox") && target.getAttribute("viewBox");
// conditionally set the viewBox on the svg
viewBox && svg.setAttribute("viewBox", viewBox);
// copy the contents of the clone into the fragment
for (// clone the target
var clone = target.cloneNode(!0); clone.childNodes.length; ) {
fragment.appendChild(clone.firstChild);
container.appendChild(clone.firstChild);
}
// append the fragment into the svg
svg.appendChild(fragment);
svg.appendChild(container);
}
}
function loadreadystatechange(xhr) {
Expand All @@ -37,7 +45,7 @@
// ensure the cached target
target || (target = xhr._cachedTarget[item.id] = cachedDocument.getElementById(item.id)),
// embed the target into the svg
embed(item.svg, target);
embed(item.use, item.svg, target);
});
}
}, // test the ready state change immediately
Expand Down Expand Up @@ -65,6 +73,7 @@
xhr || (xhr = requests[url] = new XMLHttpRequest(), xhr.open("GET", url), xhr.send(),
xhr._embeds = []), // add the svg and id as an item to the xhr embeds list
xhr._embeds.push({
use: use,
svg: svg,
id: id
}), // prepare the xhr ready state change event
Expand Down
28 changes: 20 additions & 8 deletions dist/svg4everybody.legacy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,31 @@
"function" == typeof define && define.amd ? // AMD. Register as an anonymous module unless amdModuleId is set
define([], function() {
return root.svg4everybody = factory();
}) : "object" == typeof exports ? module.exports = factory() : root.svg4everybody = factory();
}) : "object" == typeof exports ? // Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory() : root.svg4everybody = factory();
}(this, function() {
/*! svg4everybody v2.1.0 | github.com/jonathantneal/svg4everybody */
function embed(svg, target) {
function embed(use, svg, target) {
// if the target exists
if (target) {
// create a document fragment to hold the contents of the target
var fragment = document.createDocumentFragment(), viewBox = !svg.getAttribute("viewBox") && target.getAttribute("viewBox");
// copy additional USE attributes to G
for (var container = use.attributes.length > 1 ? document.createElementNS(svg.namespaceURI, "g") : document.createDocumentFragment(), i = 0; i < use.attributes.length; i++) {
"xlink:href" !== use.attributes[i].name && container.setAttribute(use.attributes[i].name, use.attributes[i].value);
}
// TODO if X/Y attributes are used with USE their value has to be respected too
// cache the closest matching viewBox
var viewBox = !svg.getAttribute("viewBox") && target.getAttribute("viewBox");
// conditionally set the viewBox on the svg
viewBox && svg.setAttribute("viewBox", viewBox);
// copy the contents of the clone into the fragment
for (// clone the target
var clone = target.cloneNode(!0); clone.childNodes.length; ) {
fragment.appendChild(clone.firstChild);
container.appendChild(clone.firstChild);
}
// append the fragment into the svg
svg.appendChild(fragment);
svg.appendChild(container);
}
}
function loadreadystatechange(xhr) {
Expand All @@ -37,7 +45,7 @@
// ensure the cached target
target || (target = xhr._cachedTarget[item.id] = cachedDocument.getElementById(item.id)),
// embed the target into the svg
embed(item.svg, target);
embed(item.use, item.svg, target);
});
}
}, // test the ready state change immediately
Expand Down Expand Up @@ -76,6 +84,7 @@
xhr || (xhr = requests[url] = new XMLHttpRequest(), xhr.open("GET", url), xhr.send(),
xhr._embeds = []), // add the svg and id as an item to the xhr embeds list
xhr._embeds.push({
use: use,
svg: svg,
id: id
}), // prepare the xhr ready state change event
Expand All @@ -95,9 +104,12 @@
requestAnimationFrame(oninterval, 67);
}
var nosvg, fallback, opts = Object(rawopts);
// configure the fallback method
fallback = opts.fallback || function(src) {
return src.replace(/\?[^#]+/, "").replace("#", ".").replace(/^\./, "") + ".png" + (/\?[^#]+/.exec(src) || [ "" ])[0];
}, nosvg = "nosvg" in opts ? opts.nosvg : /\bMSIE [1-8]\b/.test(navigator.userAgent),
}, // set whether to shiv <svg> and <use> elements and use image fallbacks
nosvg = "nosvg" in opts ? opts.nosvg : /\bMSIE [1-8]\b/.test(navigator.userAgent),
// conditionally shiv <svg> and <use>
nosvg && (document.createElement("svg"), document.createElement("use"));
// set whether the polyfill will be activated or not
var polyfill, olderIEUA = /\bMSIE [1-8]\.0\b/, newerIEUA = /\bTrident\/[567]\b|\bMSIE (?:9|10)\.0\b/, webkitUA = /\bAppleWebKit\/(\d+)\b/, olderEdgeUA = /\bEdge\/12\.(\d+)\b/;
Expand Down
33 changes: 22 additions & 11 deletions dist/svg4everybody.legacy.min.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,23 @@
!function(a,b){"function"==typeof define&&define.amd?// AMD. Register as an anonymous module unless amdModuleId is set
define([],function(){return a.svg4everybody=b()}):"object"==typeof exports?module.exports=b():a.svg4everybody=b()}(this,function(){/*! svg4everybody v2.1.0 | github.com/jonathantneal/svg4everybody */
function a(a,b){
define([],function(){return a.svg4everybody=b()}):"object"==typeof exports?// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports=b():a.svg4everybody=b()}(this,function(){/*! svg4everybody v2.1.0 | github.com/jonathantneal/svg4everybody */
function a(a,b,c){
// if the target exists
if(b){
// create a document fragment to hold the contents of the target
var c=document.createDocumentFragment(),d=!a.getAttribute("viewBox")&&b.getAttribute("viewBox");
if(c){
// copy additional USE attributes to G
for(var d=a.attributes.length>1?document.createElementNS(b.namespaceURI,"g"):document.createDocumentFragment(),e=0;e<a.attributes.length;e++)"xlink:href"!==a.attributes[e].name&&d.setAttribute(a.attributes[e].name,a.attributes[e].value);
// TODO if X/Y attributes are used with USE their value has to be respected too
// cache the closest matching viewBox
var f=!b.getAttribute("viewBox")&&c.getAttribute("viewBox");
// conditionally set the viewBox on the svg
d&&a.setAttribute("viewBox",d);
f&&b.setAttribute("viewBox",f);
// copy the contents of the clone into the fragment
for(// clone the target
var e=b.cloneNode(!0);e.childNodes.length;)c.appendChild(e.firstChild);
var g=c.cloneNode(!0);g.childNodes.length;)d.appendChild(g.firstChild);
// append the fragment into the svg
a.appendChild(c)}}function b(b){
b.appendChild(d)}}function b(b){
// listen to changes in the request
b.onreadystatechange=function(){
// if the request is ready
Expand All @@ -26,7 +32,7 @@ var e=b._cachedTarget[d.id];
// ensure the cached target
e||(e=b._cachedTarget[d.id]=c.getElementById(d.id)),
// embed the target into the svg
a(d.svg,e)})}},// test the ready state change immediately
a(d.use,d.svg,e)})}},// test the ready state change immediately
b.onreadystatechange()}function c(c){function d(){
// while the index exists in the live <use> collection
for(// get the cached <use> index
Expand All @@ -53,14 +59,19 @@ if(q.length){
var s=m[q];
// ensure the xhr request exists
s||(s=m[q]=new XMLHttpRequest,s.open("GET",q),s.send(),s._embeds=[]),// add the svg and id as an item to the xhr embeds list
s._embeds.push({svg:j,id:r}),// prepare the xhr ready state change event
s._embeds.push({use:i,svg:j,id:r}),// prepare the xhr ready state change event
b(s)}else
// embed the local id into the svg
a(j,document.getElementById(r))}}else
// increase the index when the previous value was not "valid"
++c}
// continue the interval
n(d,67)}var e,f,g=Object(c);f=g.fallback||function(a){return a.replace(/\?[^#]+/,"").replace("#",".").replace(/^\./,"")+".png"+(/\?[^#]+/.exec(a)||[""])[0]},e="nosvg"in g?g.nosvg:/\bMSIE [1-8]\b/.test(navigator.userAgent),e&&(document.createElement("svg"),document.createElement("use"));
n(d,67)}var e,f,g=Object(c);
// configure the fallback method
f=g.fallback||function(a){return a.replace(/\?[^#]+/,"").replace("#",".").replace(/^\./,"")+".png"+(/\?[^#]+/.exec(a)||[""])[0]},// set whether to shiv <svg> and <use> elements and use image fallbacks
e="nosvg"in g?g.nosvg:/\bMSIE [1-8]\b/.test(navigator.userAgent),
// conditionally shiv <svg> and <use>
e&&(document.createElement("svg"),document.createElement("use"));
// set whether the polyfill will be activated or not
var h,i=/\bMSIE [1-8]\.0\b/,j=/\bTrident\/[567]\b|\bMSIE (?:9|10)\.0\b/,k=/\bAppleWebKit\/(\d+)\b/,l=/\bEdge\/12\.(\d+)\b/;h="polyfill"in g?g.polyfill:i.test(navigator.userAgent)||j.test(navigator.userAgent)||(navigator.userAgent.match(l)||[])[1]<10547||(navigator.userAgent.match(k)||[])[1]<537;
// create xhr requests object
Expand Down
27 changes: 17 additions & 10 deletions dist/svg4everybody.min.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,26 @@
!function(a,b){"function"==typeof define&&define.amd?
// AMD. Register as an anonymous module unless amdModuleId is set
define([],function(){return a.svg4everybody=b()}):"object"==typeof exports?module.exports=b():a.svg4everybody=b()}(this,function(){/*! svg4everybody v2.1.0 | github.com/jonathantneal/svg4everybody */
function a(a,b){
define([],function(){return a.svg4everybody=b()}):"object"==typeof exports?
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports=b():a.svg4everybody=b()}(this,function(){/*! svg4everybody v2.1.0 | github.com/jonathantneal/svg4everybody */
function a(a,b,c){
// if the target exists
if(b){
// create a document fragment to hold the contents of the target
var c=document.createDocumentFragment(),d=!a.getAttribute("viewBox")&&b.getAttribute("viewBox");
if(c){
// copy additional USE attributes to G
for(var d=a.attributes.length>1?document.createElementNS(b.namespaceURI,"g"):document.createDocumentFragment(),e=0;e<a.attributes.length;e++)"xlink:href"!==a.attributes[e].name&&d.setAttribute(a.attributes[e].name,a.attributes[e].value);
// TODO if X/Y attributes are used with USE their value has to be respected too
// cache the closest matching viewBox
var f=!b.getAttribute("viewBox")&&c.getAttribute("viewBox");
// conditionally set the viewBox on the svg
d&&a.setAttribute("viewBox",d);
f&&b.setAttribute("viewBox",f);
// copy the contents of the clone into the fragment
for(
// clone the target
var e=b.cloneNode(!0);e.childNodes.length;)c.appendChild(e.firstChild);
var g=c.cloneNode(!0);g.childNodes.length;)d.appendChild(g.firstChild);
// append the fragment into the svg
a.appendChild(c)}}function b(b){
b.appendChild(d)}}function b(b){
// listen to changes in the request
b.onreadystatechange=function(){
// if the request is ready
Expand All @@ -29,7 +36,7 @@ var e=b._cachedTarget[d.id];
// ensure the cached target
e||(e=b._cachedTarget[d.id]=c.getElementById(d.id)),
// embed the target into the svg
a(d.svg,e)})}},
a(d.use,d.svg,e)})}},
// test the ready state change immediately
b.onreadystatechange()}function c(c){function d(){
// while the index exists in the live <use> collection
Expand All @@ -49,7 +56,7 @@ var p=j[n];
// ensure the xhr request exists
p||(p=j[n]=new XMLHttpRequest,p.open("GET",n),p.send(),p._embeds=[]),
// add the svg and id as an item to the xhr embeds list
p._embeds.push({svg:h,id:o}),
p._embeds.push({use:g,svg:h,id:o}),
// prepare the xhr ready state change event
b(p)}else
// embed the local id into the svg
Expand Down
24 changes: 18 additions & 6 deletions lib/svg4everybody.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,21 @@
/*! svg4everybody v2.1.0 | github.com/jonathantneal/svg4everybody */

function embed(svg, target) {
function embed(use, svg, target) {
// if the target exists
if (target) {
// create a document fragment to hold the contents of the target
var fragment = document.createDocumentFragment();
// create a new element to hold the contents of the target
// - document fragment if USE element does not have any additional attributes
// - G element if there are additional attributes
var container = use.attributes.length > 1 ? document.createElementNS(svg.namespaceURI, 'g') : document.createDocumentFragment();

// copy additional USE attributes to G
for (var i = 0; i < use.attributes.length; i++) {
if (use.attributes[i].name !== 'xlink:href') {
container.setAttribute(use.attributes[i].name, use.attributes[i].value);
}
}

// TODO if X/Y attributes are used with USE their value has to be respected too

// cache the closest matching viewBox
var viewBox = !svg.getAttribute('viewBox') && target.getAttribute('viewBox');
Expand All @@ -19,11 +30,11 @@ function embed(svg, target) {

// copy the contents of the clone into the fragment
while (clone.childNodes.length) {
fragment.appendChild(clone.firstChild);
container.appendChild(clone.firstChild);
}

// append the fragment into the svg
svg.appendChild(fragment);
svg.appendChild(container);
}
}

Expand Down Expand Up @@ -55,7 +66,7 @@ function loadreadystatechange(xhr) {
}

// embed the target into the svg
embed(item.svg, target);
embed(item.use, item.svg, target);
});
}
};
Expand Down Expand Up @@ -172,6 +183,7 @@ function svg4everybody(rawopts) {

// add the svg and id as an item to the xhr embeds list
xhr._embeds.push({
use: use,
svg: svg,
id: id
});
Expand Down