SVG útlínu í fyllingu breytir — breyttu útlínum í fylltar leiðir

Límdu inn hvaða SVG sem inniheldur form með útlínu og fáðu til baka samsvarandi SVG þar sem hverri útlínu hefur verið skipt út fyrir fyllta leið með sömu sjónrænu lögun og breidd. Gagnlegt fyrir táknkerfi og hönnunartól sem birta aðeins fyllingar áreiðanlega, eða til að einfalda SVG niður í eingöngu fylltar leiðir fyrir frekari vektorvinnslu.

Hvað er þetta verkfæri?

Sumar myndgerðarrásir — ákveðnir táknaletursgjafar, sum leikjavélar, eldri PDF-útflytjendur og tól sem setja aðeins saman fyllingar — ráða ekki rétt við SVG útlínur eða alls ekki. Að breyta útlínu í fyllt form af sömu breidd kemur alveg í veg fyrir þetta: sjónræn niðurstaða lítur eins út, en hún er sett fram sem ein fyllt leið í stað útlínulínu.

Þetta tól virkar með því að taka sýni af mörgum punktum meðfram útlínu hvers forms (með því að nota eigin API vafrans fyrir leiðarlengd, sama kerfi og SVG-hreyfimyndir nota) og byggir tvær samsíða hliðraðar línur á hálfri útlínubreidd hvorum megin, lokar þeim síðan í eina fyllta marghyrning.

Af hverju að nota það?

Virkar með path-, line-, polyline-, polygon-, rect-, circle- og ellipse-efjum — ekki bara <path> — með einni samræmdri sýnatökuaðferð.
Varðveitir eigin fyllingu formsins (ef hún var til staðar) sem sérstakt lag undir nýju útlínufyllingunni, þannig að fyllt og útlínuð form breytast rétt.
Hlið við hlið forskoðun fyrir/eftir svo þú getir sjónrænt staðfest breytinguna áður en þú afritar niðurstöðuna.
Keyrir að öllu leyti í vafranum þínum — SVG-ið sem þú límir inn er aldrei sent neitt.
Ókeypis, samstundis, engin skráarstærðartakmörkun umfram það sem vafrinn þinn ræður við að birta.

Hvernig á að nota það

Límdu SVG-kóðann þinn inn í textareitinn (virkt dæmi er forútfyllt).
Smelltu á "Convert strokes to fills".
Berðu saman fyrir/eftir forskoðunina til að staðfesta að niðurstaðan líti rétt út.
Smelltu á "Copy SVG" til að afrita breytta, útlínulausa kóðann.

Dæmi

Inntak

<path d="M20 100 Q100 20 180 100" fill="none" stroke="#3B82F6" stroke-width="12"/>

Úttak

Eitt <path fill="#3B82F6"> þar sem útlínan rekur báðar hliðar upprunalega ferilsins, 12 einingar á milli, án nokkurs stroke-eigindis.

Lögun ferilsins er varðveitt vegna þess að tólið tekur sýni af punktum samfellt meðfram raunverulega birtu leiðinni, ekki bara stýripunktum hennar.

Algengar spurningar

Af hverju verða skörp horn ávöl í stað oddhvassra (mitred)?

Þetta er þekkt, vísvitandi einföldun á sýnatökuaðferðinni: þétt punktasýnataka meðfram leið framleiðir eðlilega ávöl mót og enda, óháð upprunalegu gildi stroke-linejoin eða stroke-linecap. Að endurgera nákvæm mitre- eða bevel-mót krefst annars, flóknari reiknirits (skurður línubúta við hvern hornpunkt) sem þetta tól útfærir ekki. Fyrir flest tákn- og myndskreytingatilvik er sjónrænn munur lítill, en ef þú þarft nákvæm mitre-mót verður "outline stroke"-eiginleiki sérhæfðs vektorritils nákvæmari.

Ræður þetta við brotalínur (stroke-dasharray)?

Nei — tólið meðhöndlar sérhverja útlínu sem samfellda og hunsar stroke-dasharray/stroke-dashoffset. Brotalína verður breytt eins og hún væri samfelld, sem breytir útliti hennar. Ef SVG-ið þitt notar brotalínur er þetta tól ekki rétta lausnin fyrir þau tilteknu form.

Af hverju breyttist ekkert?

Tólið breytir aðeins efjum sem hafa bæði útlínulit (ekki "none") og jákvæða stroke-width, hvort sem það er sett sem eigindi eða í eigin stíl efsins. Ef SVG-ið þitt setur útlínu með ytri CSS-flokki sem vafrinn getur ekki leyst innan einangraðrar forskoðunar þessa tóls, eða með <style>-blokk sem vísar í flokka, gæti reiknaði stíllinn ekki leystst rétt — reyndu þess í stað að setja stroke og stroke-width sem bein eigindi á formið.

Hvenær ætti ég að breyta útlínum í fyllingar og hvenær ætti ég að halda útlínum?

Ef þú ert enn að hanna, haltu útlínum — stroke-width helst breytanleg sem ein tala, sem þú tapar eftir breytingu. Ef þú ert að flytja út í vinnsluferli sem meðhöndlar útlínur ranglega (táknaletursgjafar, ákveðnar leikjavélar eða PDF-útflytjendur), breyttu sem lokaskrefi útflutnings og haltu upprunalegu útlínuðu skránni sem breytanlegri heimild þinni, þar sem breytingin er einstefna.

Gerir breytingin SVG-skrána stærri?

Yfirleitt já — útlínuferill sem er skilgreindur af fáum stýripunktum verður að fylltri útlínu sem samanstendur af hundruðum sýnatekinna línubúta, þannig að leiðargögnin aukast töluvert. Fyrir tákn skiptir þetta sjaldan máli í reynd, en ef stærð er áhyggjuefni, keyrðu breytta úttakið í gegnum SVG-hagræðingartól á eftir til að minnka nákvæmni hnita.

Flyst stroke-opacity yfir í breyttu fyllinguna?

Nei — breytta leiðin tekur lit útlínunnar sem fyllingu sína en með fullri ógegnsæi; stroke-opacity gildi upprunalega formsins er sleppt. Ef þú þarft að varðveita gegnsæið, bættu handvirkt við fill-opacity með sama gildi við breyttu leiðina eftir að hafa afritað úttakið.