mirror
/
badgen
kopia lustrzana https://github.com/badgen/badgen
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Optimize svg markup -> performance++

pull/3/head
Amio 2018-07-01 14:43:16 +08:00
rodzic 56de55944c
commit d119d53ce0
2 zmienionych plików z 12 dodań i 14 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

6
README.md
Wyświetl plik

@ -42,9 +42,9 @@ https://badgen.now.sh/
`npm run bench` on my iMac5K(Late 2014), 3.5G i5, with Node.js 10.5.0:
```bash
generate by short params x 543,857 ops/sec ±0.98% (90 runs sampled)
generate by long params x 512,747 ops/sec ±0.66% (91 runs sampled)
generate by full params x 461,409 ops/sec ±0.78% (90 runs sampled)
generate by short params x 717,411 ops/sec ±0.79% (89 runs sampled)
generate by long params x 692,485 ops/sec ±0.87% (93 runs sampled)
generate by full params x 613,054 ops/sec ±0.97% (92 runs sampled)
```
## License

20
lib/index.js
Wyświetl plik

@ -6,17 +6,15 @@ module.exports = function ({subject, status, color}) {
const sbTextWidth = calcWidth(subject)
const sbRectWidth = sbTextWidth + 10
const sbTextCenter = sbRectWidth / 2
const stTextWidth = calcWidth(status)
const stRectWidth = stTextWidth + 12
const stTextCenter = sbRectWidth + stRectWidth / 2 - 1
const stRectWidth = stTextWidth + 13
const stTextStart = sbTextWidth + 16
const width = sbRectWidth + stRectWidth
return `
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="${width}" height="20">
<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="20">
<linearGradient id="a" x2="0" y2="100%">
<stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
<stop offset="1" stop-opacity=".1"/>
@ -25,12 +23,12 @@ module.exports = function ({subject, status, color}) {
<rect rx="3" x="${sbRectWidth}" width="${stRectWidth}" height="20" fill="#${color}"/>
<path fill="#${color}" d="M${sbRectWidth} 0h4v20h-4z"/>
<rect rx="3" width="${width}" height="20" fill="url(#a)"/>
<g fill="#fff" text-anchor="middle" font-family="Arial,sans-serif" font-size="12">
<text x="${sbTextCenter + 1}" y="15" textLength="${sbTextWidth}" fill="#000" opacity="0.2">${subject}</text>
<text x="${sbTextCenter}" y="14" textLength="${sbTextWidth}">${subject}</text>
<text x="${stTextCenter + 1}" y="15" textLength="${stTextWidth}" fill="#000" opacity="0.2">${status}</text>
<text x="${stTextCenter}" y="14" textLength="${stTextWidth}">${status}</text>
</g> <script xmlns=""/>
<g fill="#fff" text-anchor="start" font-family="Arial,sans-serif" font-size="12">
<text x="6" y="15" textLength="${sbTextWidth}" fill="#000" opacity="0.2">${subject}</text>
<text x="5" y="14" textLength="${sbTextWidth}">${subject}</text>
<text x="${stTextStart + 1}" y="15" textLength="${stTextWidth}" fill="#000" opacity="0.2">${status}</text>
<text x="${stTextStart}" y="14" textLength="${stTextWidth}">${status}</text>
</g><script/>
</svg>
`
}