CodeKitHubБұл құрал не істейді?
Кейбір рендеринг тізбектері — белгіше қаріптерінің кейбір генераторлары, кейбір ойын қозғалтқыштары, ескірек PDF экспорттаушылар және тек толтыруларды құрастыратын құралдар — SVG контурларын дұрыс өңдемейді немесе мүлдем өңдемейді. Контурды сол ендегі толтырылған пішінге түрлендіру мұны толығымен айналып өтеді: визуалды нәтиже бірдей көрінеді, бірақ ол контурлы сызық орнына бір толтырылған жол ретінде көрсетіледі.
Бұл құрал әр пішіннің контуры бойымен көптеген нүктелерді іріктеу арқылы жұмыс істейді (браузердің өз жол ұзындығы API-ін пайдаланып, SVG анимациясы қолданатын дәл сол механизммен) және әр жағында контур енінің жартысында екі параллель ығысу сызығын құрастырады, содан кейін оларды бір толтырылған көпбұрышқа жабады.
Оны неге пайдалану керек?
- path, line, polyline, polygon, rect, circle және ellipse элементтерімен жұмыс істейді — тек <path>-пен ғана емес — бірыңғай іріктеу әдісін пайдаланып.
- Пішіннің өз толтыруын (болса) жаңа контур-толтырудың астында бөлек қабат ретінде сақтайды, сондықтан толтырылған әрі контурлы пішіндер дұрыс түрленеді.
- Нәтижені көшірмес бұрын түрлендіруді визуалды түрде растау үшін қатар қойылған дейінгі/кейінгі алдын ала қарау.
- Толығымен браузеріңізде жұмыс істейді — сіз қойған SVG ешқашан ешқайда жүктелмейді.
- Тегін, лезде, браузеріңіз рендерлей алатыннан басқа файл өлшемі шектеуі жоқ.
Оны қалай пайдалану керек
- SVG кодыңызды мәтін өрісіне қойыңыз (жұмыс істейтін мысал алдын ала толтырылған).
- "Convert strokes to fills" түймесін басыңыз.
- Нәтиженің дұрыс көрінетінін растау үшін дейінгі/кейінгі алдын ала қарауды салыстырыңыз.
- Түрлендірілген, контурсыз кодты көшіру үшін "Copy SVG" түймесін басыңыз.
Мысал
Енгізу
<path d="M20 100 Q100 20 180 100" fill="none" stroke="#3B82F6" stroke-width="12"/>Нәтиже
Контуры бастапқы қисықтың екі жағын да 12 бірлік қашықтықта қайталайтын, ешбір stroke атрибутынсыз бір <path fill="#3B82F6">.Қисықтың пішіні сақталады, себебі құрал нүктелерді тек оның бақылау нүктелері бойынша емес, нақты рендерленген жол бойымен үздіксіз іріктейді.
Жиі қойылатын сұрақтар
Неге өткір бұрыштар үшкір (mitered) болудың орнына дөңгеленіп шығады?
Бұл іріктеу тәсілінің белгілі, әдейі жеңілдетілуі: жол бойындағы тығыз нүкте іріктеу stroke-linejoin немесе stroke-linecap-тың бастапқы мәніне қарамастан табиғи түрде дөңгеленген қосылыстар мен ұштарды тудырады. Дәл mitre немесе bevel қосылыстарын қалпына келтіру бұл құрал іске асырмайтын өзгеше, күрделірек алгоритмді (әр төбеде сызық сегменттерінің қиылысуы) талап етеді. Көптеген белгіше мен иллюстрация қолданыстары үшін визуалды айырмашылық шамалы, бірақ дәл mitre қосылыстары қажет болса, арнайы векторлық редактордың "outline stroke" функциясы дәлірек болады.
Бұл сызықша контурларды (stroke-dasharray) өңдей ме?
Жоқ — құрал әр контурды тұтас деп қарастырады және stroke-dasharray/stroke-dashoffset-ті елемейді. Сызықша контур тұтас болғандай түрленеді, бұл оның сыртқы түрін өзгертеді. SVG-іңіз сызықша контурларды пайдаланса, бұл құрал сол нақты пішіндер үшін жарамайды.
Неге ештеңе түрленбеді?
Құрал тек атрибут ретінде немесе элементтің өз стилінде орнатылған контур түсі ("none" емес) мен оң stroke-width екеуі де бар элементтерді ғана түрлендіреді. SVG-іңіз контурды браузер осы құралдың оқшауланған алдын ала қарауында шеше алмайтын сыртқы CSS класы арқылы немесе кластарға сілтейтін <style> блогы арқылы орнатса, есептелген стиль дұрыс шешілмеуі мүмкін — оның орнына stroke мен stroke-width-ты пішінде тікелей атрибут ретінде орнатып көріңіз.
Контурларды толтыруға қашан түрлендіру керек, қашан контурларды сақтап қалу керек?
Әлі дизайн жасап жатсаңыз, контурларды сақтаңыз — stroke-width бір сан ретінде өңделетін күйде қалады, оны түрлендіруден кейін жоғалтасыз. Контурларды дұрыс өңдемейтін тізбекке (белгіше қаріптерінің генераторлары, кейбір ойын қозғалтқыштары немесе PDF экспорттаушылар) экспорттасаңыз, соңғы экспорт қадамы ретінде түрлендіріңіз және бастапқы контурлы файлды өңделетін көзіңіз ретінде сақтаңыз, себебі түрлендіру бір бағытты болады.
Түрлендіру SVG файлын үлкенірек ете ме?
Әдетте иә — бірнеше бақылау нүктесімен анықталған контурлы қисық жүздеген іріктелген сызық сегменттерінен тұратын толтырылған контурға айналады, сондықтан жол деректері айтарлықтай өседі. Белгішелер үшін бұл іс жүзінде сирек маңызды болады, бірақ өлшем алаңдаушылық туғызса, координаталар дәлдігін қысқарту үшін түрлендірілген нәтижені кейін SVG оңтайландырғышы арқылы өткізіңіз.
stroke-opacity түрлендірілген толтыруға көше ме?
Жоқ — түрлендірілген жол контур түсін толтыру ретінде алады, бірақ толық мөлдірсіздікпен; бастапқы пішіндегі stroke-opacity мәні тасталады. Мөлдірлікті сақтау қажет болса, нәтижені көшіргеннен кейін түрлендірілген жолға қолмен сол мәнмен fill-opacity қосыңыз.