| OLD | NEW |
| 1 | 1 /** |
| 2 /** | |
| 3 * The `iron-iconset-svg` element allows users to define their own icon sets | 2 * The `iron-iconset-svg` element allows users to define their own icon sets |
| 4 * that contain svg icons. The svg icon elements should be children of the | 3 * that contain svg icons. The svg icon elements should be children of the |
| 5 * `iron-iconset-svg` element. Multiple icons should be given distinct id's. | 4 * `iron-iconset-svg` element. Multiple icons should be given distinct id's. |
| 6 * | 5 * |
| 7 * Using svg elements to create icons has a few advantages over traditional | 6 * Using svg elements to create icons has a few advantages over traditional |
| 8 * bitmap graphics like jpg or png. Icons that use svg are vector based so the
y | 7 * bitmap graphics like jpg or png. Icons that use svg are vector based so the
y |
| 9 * are resolution independent and should look good on any device. They are | 8 * are resolution independent and should look good on any device. They are |
| 10 * stylable via css. Icons can be themed, colorized, and even animated. | 9 * stylable via css. Icons can be themed, colorized, and even animated. |
| 11 * | 10 * |
| 12 * Example: | 11 * Example: |
| (...skipping 146 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 159 return this._prepareSvgClone(this._icons[id], this.size); | 158 return this._prepareSvgClone(this._icons[id], this.size); |
| 160 }, | 159 }, |
| 161 | 160 |
| 162 /** | 161 /** |
| 163 * @param {Element} sourceSvg | 162 * @param {Element} sourceSvg |
| 164 * @param {number} size | 163 * @param {number} size |
| 165 * @return {Element} | 164 * @return {Element} |
| 166 */ | 165 */ |
| 167 _prepareSvgClone: function(sourceSvg, size) { | 166 _prepareSvgClone: function(sourceSvg, size) { |
| 168 if (sourceSvg) { | 167 if (sourceSvg) { |
| 169 var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); | 168 var content = sourceSvg.cloneNode(true), |
| 170 svg.setAttribute('viewBox', ['0', '0', size, size].join(' ')); | 169 svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'), |
| 170 viewBox = content.getAttribute('viewBox') || '0 0 ' + size + ' ' + s
ize; |
| 171 svg.setAttribute('viewBox', viewBox); |
| 171 svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); | 172 svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); |
| 172 // TODO(dfreedm): `pointer-events: none` works around https://crbug.com/
370136 | 173 // TODO(dfreedm): `pointer-events: none` works around https://crbug.com/
370136 |
| 173 // TODO(sjmiles): inline style may not be ideal, but avoids requiring a
shadow-root | 174 // TODO(sjmiles): inline style may not be ideal, but avoids requiring a
shadow-root |
| 174 svg.style.cssText = 'pointer-events: none; display: block; width: 100%;
height: 100%;'; | 175 svg.style.cssText = 'pointer-events: none; display: block; width: 100%;
height: 100%;'; |
| 175 svg.appendChild(sourceSvg.cloneNode(true)).removeAttribute('id'); | 176 svg.appendChild(content).removeAttribute('id'); |
| 176 return svg; | 177 return svg; |
| 177 } | 178 } |
| 178 return null; | 179 return null; |
| 179 } | 180 } |
| 180 | 181 |
| 181 }); | 182 }); |
| OLD | NEW |