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

Optimize svg markup

pull/3/head
Amio 2018-07-15 02:09:01 +08:00
rodzic 35936e1080
commit fd3a087d48
1 zmienionych plików z 13 dodań i 13 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

26
lib/index.js
Wyświetl plik

@ -4,10 +4,8 @@ const colorPresets = require('./color-presets.js')
module.exports = function ({subject, status, color}) {
color = colorPresets[color] || color || colorPresets['blue']
const sbRectWidth = calcWidth(subject) + 10
const sbRectWidth = calcWidth(subject) + 11
const stRectWidth = calcWidth(status) + 11
const stTextStart = sbRectWidth + 5
const width = sbRectWidth + stRectWidth
return `
@ -16,16 +14,18 @@ module.exports = function ({subject, status, color}) {
<stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
<stop offset="1" stop-opacity=".1"/>
</linearGradient>
<rect rx="3" width="${width}" height="20" fill="#${color}"/>
<rect rx="3" x="0" width="${sbRectWidth}" height="20" fill="#555"/>
<path fill="#555" d="M${sbRectWidth} 0v20h-4v-20h4z"/>
<rect rx="3" width="${width}" height="20" fill="url(#a)"/>
<g fill="#fff" text-anchor="start" font-family="DejaVu Sans,Verdana,sans-serif" font-size="11">
<text x="6" y="14.8" fill="#000" opacity="0.2">${subject}</text>
<text x="5" y="13.8">${subject}</text>
<text x="${stTextStart + 1}" y="14.8" fill="#000" opacity="0.2">${status}</text>
<text x="${stTextStart}" y="13.8">${status}</text>
</g><script/>
<mask id="m"><rect width="${width}" height="20" rx="3" fill="#FFF"/></mask>
<g mask="url(#m)">
<rect width="${sbRectWidth}" height="20" fill="#555"/>
<rect x="${sbRectWidth}" width="${stRectWidth}" height="20" fill="#${color}"/>
<rect width="${width}" height="20" fill="url(#a)"/>
</g>
<g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="11">
<text x="7" y="14.8" fill="#000" opacity="0.25">${subject}</text>
<text x="6" y="13.8">${subject}</text>
<text x="${sbRectWidth + 6}" y="14.8" fill="#000" opacity="0.25">${status}</text>
<text x="${sbRectWidth + 5}" y="13.8">${status}</text>
</g>
</svg>
`
}