Этим утром https://codepen.io/ Я видел эту прекрасную Пересеченную коробку SVG паттерна .Код выглядит так:
body
{ background-image: url('data:image/svg+xml,<?xml version="1.0"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"[<!ENTITY E "+2-1"><!ENTITY e "+2+1"><!ENTITY s "+0+2"><!ENTITY w "-2+1"><!ENTITY W "-2-1">\
<!ENTITY l "l&W;&W;&s;&e;&s;&e;z"><!ENTITY L "M+0+1&l;m+6-3&l;m+6+3&l;m-6+3&l;m+6+3&l;">\
<!ENTITY r "l&E;&E;&s;&w;&s;&w;z"><!ENTITY R "M+0+1&r;m+6-3&r;m+6+3&r;m-6+3&r;m-6+3&r;">\
<!ENTITY t "l&W;&W;&E;&e;&E;&e;z"><!ENTITY T "M+0+1&t;m+0+6&t;m+6-3&t;m+6-3&t;m+0+6&t;">\
]><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="none" preserveAspectRatio="none">\
<path d="&L;" fill="%23210"/>\
<path d="&R;" fill="%23432"/>\
<path d="&T;" fill="%23654"/>\
<path d="&L;&R;&T;" stroke="%23876" stroke-width="0.1" stroke-linejoin="miter" stroke-miterlimit="1.5"/>\
</svg>')
; background-size: 200px 100px
; background-color: black
; background-position: center center
}
Я никогда не видел такого рода код и хотел, чтобы он работал как элемент svg, и он не работал.Наконец я придумал это:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="none" preserveAspectRatio="none">
<path id="L" d="M0,1 l-2,-1 -2,-1 0,2 2,1 0,2 2,1 z m6,-3 l-2,-1 -2,-1 0,2 2,1 0,2 2,1 z m6,3 l-2,-1 -2,-1 0,2 2,1 0,2 2,1 z m-6,3 l-2,-1 -2,-1 0,2 2,1 0,2 2,1 z m6,3 l-2,-1 -2,-1 0,2 2,1 0,2 2,1 z" fill="#210"/>
<path id="R" d="M0,1 l2,-1 2,-1 0,2 -2,1 0,2 -2,1z m6,-3l2,-1 2,-1 0,2 -2,1 0,2 -2,1z m6,3l2,-1 2,-1 0,2 -2,1 0,2 -2,1z m-6,3l2,-1 2,-1 0,2 -2,1 0,2 -2,1z m-6,3l2,-1 2,-1 0,2 -2,1 0,2 -2,1z" fill="#432"/>
<path id="T" d="M0,1 l-2,-1 -2,-1 2,-1 2,1 2,-1 2,1 z m0,6 l-2,-1 -2,-1 2,-1 2,1 2,-1 2,1 z m6,-3 l-2,-1 -2,-1 2,-1 2,1 2,-1 2,1 z m6-3 l-2,-1 -2,-1 2,-1 2,1 2,-1 2,1 z m0,6l-2,-1 -2,-1 2,-1 2,1 2,-1 2,1 z" fill="#654"/>
<path d="M0,1 l-2,-1 -2,-1 0,2 2,1 0,2 2,1 z m6,-3 l-2,-1 -2,-1 0,2 2,1 0,2 2,1 z m6,3 l-2,-1 -2,-1 0,2 2,1 0,2 2,1 z m-6,3 l-2,-1 -2,-1 0,2 2,1 0,2 2,1 z m6,3 l-2,-1 -2,-1 0,2 2,1 0,2 2,1 z
M0,1 l2,-1 2,-1 0,2 -2,1 0,2 -2,1z m6,-3l2,-1 2,-1 0,2 -2,1 0,2 -2,1z m6,3l2,-1 2,-1 0,2 -2,1 0,2 -2,1z m-6,3l2,-1 2,-1 0,2 -2,1 0,2 -2,1z m-6,3l2,-1 2,-1 0,2 -2,1 0,2 -2,1z
M0,1 l-2,-1 -2,-1 2,-1 2,1 2,-1 2,1 z m0,6 l-2,-1 -2,-1 2,-1 2,1 2,-1 2,1 z m6,-3 l-2,-1 -2,-1 2,-1 2,1 2,-1 2,1 z m6-3 l-2,-1 -2,-1 2,-1 2,1 2,-1 2,1 z m0,6l-2,-1 -2,-1 2,-1 2,1 2,-1 2,1 z" stroke="#876" stroke-width="0.1" stroke-linejoin="miter" stroke-miterlimit="1.5"/>
</svg>
Однако я бы хотел заставить его работать с использованием тегов <!ENTITY
.Кто-нибудь знает, как заставить его работать с помощью тегов <!ENTITY
?