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

Simplify svg structure

pull/3/head
Amio 2018-05-29 18:13:52 +08:00
rodzic 9fc192f26f
commit 67111d100a
1 zmienionych plików z 10 dodań i 14 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

24
index.js
Wyświetl plik

@ -1,14 +1,14 @@
module.exports = function ({subject, status, color = '#97CA00'}) { module.exports = function ({subject, status, color = '#4C1'}) {
const sbl = subject.length const sbl = subject.length
const stl = status.length const stl = status.length
const charWidth = 8 const charWidth = 7.5
const sbTextWidth = sbl * charWidth const sbTextWidth = sbl * charWidth
const sbRectWidth = sbTextWidth + 12 const sbRectWidth = sbTextWidth + 12
const sbTextCenter = sbRectWidth / 2 const sbTextCenter = sbRectWidth / 2
const stTextWidth = stl * charWidth - 2 const stTextWidth = stl * charWidth - 4
const stRectWidth = stTextWidth + 12 const stRectWidth = stTextWidth + 14
const stTextCenter = sbRectWidth + stRectWidth / 2 const stTextCenter = sbRectWidth + stRectWidth / 2
const width = sbRectWidth + stRectWidth const width = sbRectWidth + stRectWidth
@ -16,19 +16,15 @@ module.exports = function ({subject, status, color = '#97CA00'}) {
return ` return `
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="${width}" height="20"> width="${width}" height="20">
<linearGradient id="b" x2="0" y2="100%"> <linearGradient id="a" x2="0" y2="100%">
<stop offset="0" stop-color="#bbb" stop-opacity=".1"/> <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
<stop offset="1" stop-opacity=".1"/> <stop offset="1" stop-opacity=".1"/>
</linearGradient> </linearGradient>
<clipPath id="a"> <rect rx="3" width="${width}" height="20" fill="#555"/>
<rect width="${width}" height="20" rx="3" fill="#fff"/> <rect rx="3" x="${sbRectWidth}" width="${stRectWidth}" height="20" fill="${color}"/>
</clipPath> <path fill="${color}" d="M${sbRectWidth} 0h4v20h-4z"/>
<g clip-path="url(#a)"> <rect rx="3" width="${width}" height="20" fill="url(#a)"/>
<path fill="#555" d="M0 0h${sbRectWidth}v20H0z"/> <g fill="#fff" text-anchor="middle" font-family="SF Mono,Consolas,monospace" font-size="12">
<path fill="${color}" d="M${sbRectWidth} 0h${stRectWidth}v20H${sbRectWidth}z"/>
<path fill="url(#b)" d="M0 0h${sbRectWidth + stRectWidth}v20H0z"/>
</g>
<g fill="#fff" text-anchor="middle" font-family="SF Mono,Consolas,monospace" font-size="13">
<text x="${sbTextCenter}" y="15" textLength="${sbTextWidth}" fill="#010101" fill-opacity=".3">${subject}</text> <text x="${sbTextCenter}" y="15" textLength="${sbTextWidth}" fill="#010101" fill-opacity=".3">${subject}</text>
<text x="${sbTextCenter}" y="14" textLength="${sbTextWidth}">${subject}</text> <text x="${sbTextCenter}" y="14" textLength="${sbTextWidth}">${subject}</text>
<text x="${stTextCenter}" y="15" textLength="${stTextWidth}" fill="#010101" fill-opacity=".3">${status}</text> <text x="${stTextCenter}" y="15" textLength="${stTextWidth}" fill="#010101" fill-opacity=".3">${status}</text>