슬래시가있는 SVG 및 희귀 특수 문자 (Angled Strike Through?)

OG Sean 에 게시 Dev

그리고 션

다른 소프트웨어에서 디자인을 만든 사용자의 SVG가 있는데 정상적으로 작동하는 SVG로 번역했습니다. 그러나 그들은 아마도 특수 키보드에서 나온 이상한 특수 문자를 사용했는데,이 문자는 각 문자의 중앙에있는 슬래시와 비슷한 "각진 취소 선"이라고 부를 것입니다. 현재 버전의 Google Chrome에서 Windows 10을 사용하고 있습니다.

업데이트 : 아래 답변에 감사드립니다.이 슬래시는 "각진 실선"이라고하며 문자처럼 정상적인 위치에서 벗어나 특수 문자처럼 작동하지만 실제로는 두 개의 글리프가 결합 된 "결합 된 글리프"를 만듭니다.

다음은 샘플 텍스트입니다.

n̸e̸w̸ h̸o̸r̸i̸z̸o̸n̸

글꼴에 따라 지금과 같은 방식으로 표시 될 수도 있고 표시되지 않을 수도 있습니다. 따라서 여기에 더 표준적인 원시 코드가 있습니다.

n̸e̸w̸ h̸o̸r̸i̸z̸o̸n̸

그러나 이것이 Arial 글꼴이있는 SVG에서 렌더링 될 때 슬래시는 문자 위에 있지 않고 문자 간격보다 훨씬 적은 공간으로 바로 뒤 따릅니다. 글리프를 강조 표시하면 문자 간격이 음수 인 슬래시가 아니라 하나의 특수 문자임을 확인할 수 있습니다.

이 오프셋을 SVG로 수정하여 사용자가 본 방식으로 문자 위에 슬래시를 정렬하는 방법이 있습니까?

다음은 문제의 텍스트가있는 JSFiddle 예제입니다. 아래로 스크롤하여 크고 수직 (90 회전)합니다.

https://jsfiddle.net/o5ykche1/1/

다음은 SVG 번역과 비교 한 원본 디자인 (텍스트 참고)의 비교입니다.

SVG 코드 샘플 :

<svg xmlns="http://www.w3.org/2000/svg" id="mystyle-svg-2" class="mystyle-svg " width="1650" height="6750" viewBox="0 0 1650 6750"><desc>SVG Generated by MyStyle Renderer v3.10.3</desc><defs/><g id="image-bg-group"><rect x="0" y="0" width="1650" height="6750" fill="#CCC" id="image-background-fill-color" style="fill-opacity: 2.55;"/></g><g id="design-group" transform="matrix(13.5246,0,0,13.5246,0,0)"><g type="canvas" canvas_id="1" id="mystyle-export-2-canvas-0" class="mystyle-design-canvas"><rect x="0" y="0" width="122" height="500" fill="none" id="canvas-background-color" canvas-id="1" stroke="none" style="fill-opacity: 1; stroke-width: 0; stroke-opacity: 1;"/><g id="mystyle-svg-2-obj-1" mystyle-do-type="TEXT" transform="matrix(0.001,0.8,-0.8,0.001,24.9375,263.48)" style="opacity: 1;" class="mystyle-design-object"><g transform="translate(0,-22.4140625)" class="inner-text-container"><text x="0" y="0" fill="#000000" data-font-fam="arial" id="1" style="font-size: 40px; font-family: arial; dominant-baseline: text-before-edge;" xml:space="preserve"><tspan text-anchor="middle" style="font-family: arial; text-anchor: middle;" alignment-baseline="auto">n̸e̸w̸ h̸o̸r̸i̸z̸o̸n̸</tspan></text></g></g></g></g></svg>

ccprog

여기에 약간의 추측이 있습니다. 저는 글꼴 전문가가 아닙니다.

첫째, 당신이 실행하는 기능 은 구별 부호 와 다른 글꼴 형식의 구현을 결합 하는 것입니다. FontForge로 다른 글꼴을 살펴본 결과 예를 들어

DejaVuSans.ttf내 컴퓨터에서 solidus 취소 선을 올바르게 렌더링하는 DejaVu Sans ( )에는 글리프 위치 지정에 대한 특별한 지침이 없습니다.
유니 코드를 완전히 이해하고 문자를 이전 문자의 시작 부분으로 자동으로 재배치하고 진행을 변경하지 않는 렌더러에 적합합니다.
CONSOLA.ttf오류를 표시하는 Consolas ( )는 OpenType mark태그 mkmk와 Δx_adv=-1126. 캐릭터를 이전 캐릭터의 시작 부분으로 재배치하지만 오버레이 너비를 추가하는
것을 이해하는 렌더러에게 적합 mark합니다. 저에게는 버그가있는 것처럼 보이지만 Consolas는 Microsoft의 독점 글꼴이고 OpenType도 동일한 방식으로 개발 되었기 때문에 그러한 동작에 어떤 의미가있을 수 있습니다.
LinLibertine_R.otf올바르게 렌더링되는 Linux Libertine O ( )는 OpenType mark태그를 설정 하지만 위치 지정 명령은 없습니다. 캐릭터를 이전 캐릭터의 시작 부분으로 재배치하고 진행을 변경하지 않는
것을 이해하는 렌더러에 적합 mark합니다.

내 결론은 다양한 지침을 올바르게 이해하는 글꼴 렌더링 엔진이나 렌더링 엔진이 이해하는 방식으로 분음 부호를 정의하는 글꼴이 필요하다는 것입니다. 최종 제품이 브라우저 용인 경우 렌더링 엔진을 제어 할 수 없습니다. 당신이 한 각각의 수정은 한 사람에게는 옳지 만 다른 사람에게는 틀릴 수 있습니다.

SVG 수준의 솔루션이 작동하지 않습니다. dx문자열 내부에 개별 문자를 배치 하는 속성 이 있지만 결합 된 글리프에서 작동합니다. 즉, 문자와 solidus가 서로 관련되지 않고 함께 이동합니다 (더 정확하게는 내 실험에서 문자 결합에 대한 이동 지침에는 효과).

내가 볼 수있는 유일한 신뢰할 수있는 솔루션은 웹 글꼴로 제공되는 solidus 취소 선이있는 라틴 문자에 대해 사전 구성된 문자를 포함하는 특수 글꼴을 구성하는 것입니다. 이 목록 을 신뢰할 수있는 경우 유니 코드에는 해당 코드 포인트가 포함되지 않습니다.

편집 : 중간에 유지 관리 할 수있는 해결책은 일반 solidus 를 사용 0x2F하고 위치를 변경하는 것입니다. 모든 알파벳 문자의 너비를 알아 내야하지만 제대로 작동합니다. 아래 예제는 solidus 자체의 크기 만 사용합니다. 이와 같이 : Arial의 공칭 높이는 1638, solidus의 너비는 569이므로 20px의 경우 너비는 569 × 20 ÷ 1638 = 6.95입니다. 그런 다음 solidus의 오른쪽은 항상 그것이 다루는 캐릭터의 오른쪽과 일치합니다. 문자 간격으로 1px를 추가합니다.

text {
    font-family: Arial, sans-serif;
}

<svg>
    <text x="20" y="50" font-size="20"
          dx="0 -6.95 1 -6.95 1 -6.95 1 0
           -6.95 1 -6.95 1 -6.95 1 -6.95 1 -6.95 1 -6.95 1 -6.95">n/e/w/ h/o/r/i/z/o/n/</text>
<svg>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-07-4

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

이전 게시물：Firebase-브라우저 콘솔에서 Firebase 저장소 파일을 '다운로드 할 수 없게'하려면 어떻게해야합니까?

TOP 리스트

기사

슬래시가있는 SVG 및 희귀 특수 문자 (Angled Strike Through?)

슬래시가있는 SVG 및 희귀 특수 문자 (Angled Strike Through?)

numpy의 matlab isempty () 함수?

Oracle 19c :: 지정된 사용자의 ACL을 설정하지 못했습니다.

PIL : DLL로드 실패 : 지정된 프로 시저를 찾을 수 없습니다

ojdbc6.jar와 ojdbc7.jar의 차이점은 무엇입니까?

Android 장치의 텍스트 파일에 Logcat 저장

API Gateway에서 호출 할 때 com.amazon.coral.service # UnknownOperationException과 함께 Cloudwatch Logs PutLogEvents 작업이 실패 함

파이썬 링크에서 제목 추출하기 (아름다운 수프)

오류 : "const wchar_t *"유형의 인수가 "WCHAR *"유형의 매개 변수와 호환되지 않습니다.

NSSet 내의 모든 값에 액세스

python sklearn GradientBoostingClassifier 웜 스타트 오류

Ionic 2 : 페이지에 구성 요소 포함 오류

Visual Studio 디버그 실패로 AssemblyAttributes.cs를 찾을 수 없습니다.

Python의 특정 위치에 문자열 추가

Python 소켓 프로그래밍 : 클라이언트에서 서버로 파일 업로드

전자 브라우저를 전체 화면 크기로 만드는 방법은 무엇입니까?

삼각파에 대한 수학 방정식

networkx 플로팅 유 방향 그래프

C에서 N x N 행렬식 구하기

외부 파일이 포함 된 Runnable Jar 만들기

model-> save ()가 Yii2에서 작동하지 않음

페이지의 일부 새로 고침 (div)

오류 : "const wchar_t "유형의 인수가 "WCHAR "유형의 매개 변수와 호환되지 않습니다.