티스토리 새에디터 hr svg 파일 색상 바꾸기

준비물

 

SVG viewer & editor online

 

 

 

방법

 

1. 위 사이트에 접속해 아래 코드를 붙여넣는다.

 

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
    <g fill="none" fill-rule="evenodd">
        <path fill="#777" fill-rule="nonzero" d="M5 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm27 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm27 0a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/>
        <path fill="#333" d="M0 20h64v3H0z"/>
        <path fill-rule="nonzero" stroke="#333" stroke-linecap="square" d="M0 48l7.999-8 8 8 8-8 8 8 8-8 8 8 8-8 8 8" opacity=".5"/>
        <path fill="#555" d="M0 121h200v1H0z"/>
        <path fill-rule="nonzero" stroke="#DDD" stroke-linecap="square" d="M0 141.5h200"/>
        <path fill="#D0D0D0" d="M0 169h200v1H0z"/>
        <path fill="#FFF" stroke="#D0D0D0" d="M100.516 161.517l-7.983 7.983 7.983 7.983 7.983-7.983-7.983-7.983z"/>
        <g transform="translate(0 185)">
            <path fill="#D0D0D0" d="M0 4h85v1H0zM116 4h84v1h-84z"/>
            <circle cx="100.5" cy="4.5" r="4" fill="#FFF" stroke="#D0D0D0"/>
        </g>
        <g fill="#333" opacity=".3">
            <path d="M0 60h2v60H0z"/>
        </g>
    </g>
</svg>

 

2. 코드 중에서 #FFF를 제외한 부분을 원하는 색상 코드로 바꿔준다.

 

3. 다운로드 버튼을 누르고, (원하는 파일 이름).svg라고 적은 후 save를 누른다.

 

4. 다운받은 svg 파일을 스킨 편집의 '파일업로드'에 추가해준다.

 

5. 올린 파일을 마우스 우클릭 한 후 '링크 주소 복사'를 누른다.

 

6. CSS 편집에 아래 코드를 입력해준다.

 

hr[data-ke-style], #tt-body-page hr[data-ke-style] {
    background-image: url(복사한 링크);
}

 

7. 적용을 누른다.