< use > An < IRI > reference to an element/fragment within an SVG document.
<svg class="ico">
<use xlink:href="#icoFb"></use>
</svg>
<svg class="icon icon-vk">
<use class='svg1' xlink:href="#icon-vk"></use>
<use class='svg2' xlink:href="#icon-hover"></use>
</svg>
.soc_vk:hover .svg1{ display: none; }
.soc_vk:hover .svg2{ display: inline; }
.soc_vk:not(:hover) .svg1{ display: inline; }
.soc_vk:not(:hover) .svg2{ display: none; }
_elm: function(sel){
return this._cldElm(this.svg, sel);
},
_cldElm: function(elm, sel){
return elm.querySelector(sel);
},
setAttr: function(el, ns, nm, vl){
el.setAttributeNS(ns, nm, vl);
},
setAttrs: function(el, attrs){
for (var a in attrs)
this.setAttr(el, null, a, attrs[a]);
},
// и пример использования
var ln = this._elm('.svg-line');
this.setAttrs(ln, { x1: x - 50, y1: (rowId * 80) + 40, x2: x - 10, y2: y + 35 });
debugger;