svg { /* display:block; width:1500px; margin:1em 0; */ } .container { position: relative; border: solid 2px green; width: 8cm; height:180px; margin-left:40px; overflow: hidden; } .background { position: absolute; left: 0px; top: 0px; /*ruler 360 */ background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' id='ruler' width='36cm'%3E%3Cdefs%3E%3Cstyle%3Eline%7Bstroke:black; stroke-width:0.3mm; shape-rendering:crispEdges;%7D text%7Bfont-family:sans-serif;font-size:70%25;%7D%3C/style%3E%3ClinearGradient id='ridge' x2='0' y2='1'%3E%3Cstop offset='0.01' stop-color='saddlebrown'/%3E%3Cstop offset='0.10' stop-color='burlywood'/%3E%3C/linearGradient%3E%3Cpattern id='cmTicks' width='1cm' height='100%25' patternUnits='userSpaceOnUse' x='-1px'%3E%3Cline x1='0mm' x2='0mm' y2='30%25' /%3E%3Cline x1='1mm' x2='1mm' y2='10%25' /%3E%3Cline x1='2mm' x2='2mm' y2='10%25' /%3E%3Cline x1='3mm' x2='3mm' y2='10%25' /%3E%3Cline x1='4mm' x2='4mm' y2='10%25' /%3E%3Cline x1='5mm' x2='5mm' y2='25%25' /%3E%3Cline x1='6mm' x2='6mm' y2='10%25' /%3E%3Cline x1='7mm' x2='7mm' y2='10%25' /%3E%3Cline x1='8mm' x2='8mm' y2='10%25' /%3E%3Cline x1='9mm' x2='9mm' y2='10%25' /%3E%3Cline x1='10mm' x2='10mm' y2='30%25' /%3E%3C/pattern%3E%3Cpattern id='cmDigits' width='36cm' height='100%25' patternUnits='userSpaceOnUse'%3E%3Ctext y='30%25' dy='1em'%3E%3Ctspan x='0cm'%3E0%3C/tspan%3E%3Ctspan x='1cm'%3E10%3C/tspan%3E%3Ctspan x='2cm'%3E20%3C/tspan%3E%3Ctspan x='3cm'%3E30%3C/tspan%3E%3Ctspan x='4cm'%3E40%3C/tspan%3E%3Ctspan x='5cm'%3E50%3C/tspan%3E%3Ctspan x='6cm'%3E60%3C/tspan%3E%3Ctspan x='7cm'%3E70%3C/tspan%3E%3Ctspan x='8cm'%3E80%3C/tspan%3E%3Ctspan x='9cm'%3E90%3C/tspan%3E%3Ctspan x='10cm'%3E100%3C/tspan%3E%3Ctspan x='11cm'%3E110%3C/tspan%3E%3Ctspan x='12cm'%3E120%3C/tspan%3E%3Ctspan x='13cm'%3E130%3C/tspan%3E%3Ctspan x='14cm'%3E140%3C/tspan%3E%3Ctspan x='15cm'%3E150%3C/tspan%3E%3Ctspan x='16cm'%3E160%3C/tspan%3E%3Ctspan x='17cm'%3E170%3C/tspan%3E%3Ctspan x='18cm'%3E180%3C/tspan%3E%3Ctspan x='19cm'%3E190%3C/tspan%3E%3Ctspan x='20cm'%3E200%3C/tspan%3E%3Ctspan x='21cm'%3E210%3C/tspan%3E%3Ctspan x='22cm'%3E220%3C/tspan%3E%3Ctspan x='23cm'%3E230%3C/tspan%3E%3Ctspan x='24cm'%3E240%3C/tspan%3E%3Ctspan x='25cm'%3E250%3C/tspan%3E%3Ctspan x='26cm'%3E260%3C/tspan%3E%3Ctspan x='27cm'%3E270%3C/tspan%3E%3Ctspan x='28cm'%3E280%3C/tspan%3E%3Ctspan x='29cm'%3E290%3C/tspan%3E%3Ctspan x='30cm'%3E300%3C/tspan%3E%3Ctspan x='31cm'%3E310%3C/tspan%3E%3Ctspan x='32cm'%3E320%3C/tspan%3E%3Ctspan x='33cm'%3E330%3C/tspan%3E%3Ctspan x='34cm'%3E340%3C/tspan%3E%3Ctspan x='35cm'%3E350%3C/tspan%3E%3C/text%3E%3C/pattern%3E%3Cpattern id='cmNumbers' width='100%25' height='100%25' patternUnits='userSpaceOnUse'%3E%3Crect height='100%25' width='100%25' fill='url(%23cmTicks)'/%3E%3Crect height='100%25' width='100%25' fill='url(%23cmDigits)'/%3E%3Crect height='100%25' width='10cm' x='9cm' fill='url(%23cmTens)'/%3E%3Crect height='100%25' width='10cm' x='19cm' fill='url(%23cmTwenties)'/%3E%3Crect height='100%25' width='10cm' x='29cm' fill='url(%23cmThirties)'/%3E%3C/pattern%3E%3Cpattern id='inTens' width='1in' height='100%25' patternUnits='userSpaceOnUse'%3E%3Ctext y='70%25' x='1in' dx='-1ex'%3E1%3C/text%3E%3C/pattern%3E%3Cpattern id='inNumbers' width='100%25' height='100%25' patternUnits='userSpaceOnUse'%3E%3Crect height='100%25' width='100%25' fill='url(%23inchTicks)'/%3E%3Crect height='100%25' width='100%25' fill='url(%23inDigits)'/%3E%3Crect height='100%25' width='10in' x='9in' fill='url(%23inTens)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='50%25' fill='url(%23ridge)' stroke='saddlebrown'/%3E%3Crect width='100%25' height='50%25' fill='url(%23cmNumbers)'/%3E%3C/svg%3E%0A"); background-repeat: repeat-x; /* background-position:4cm;*/ background-position: 4cm; width: 100%; height: 160px; QQQz-index: -1; } /*myruler that returns integer between 0 and 360*/ .myruler{ border: 1px solid green; position:relative; width:10cm; height:1.5cm; overflow:hidden; } .myruler > div{ position:absolute; background-color:lightblue; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='ruler' width='100cm' height='3cm'%3E%3Cdefs%3E%3Cstyle%3Eline%7Bstroke:black; stroke-width:0.3mm; shape-rendering:crispEdges;%7D text%7Bfont-family:sans-serif;font-size:70%25;%7D%3C/style%3E%3ClinearGradient id='ridge' x2='0' y2='1'%3E%3C/linearGradient%3E%3Cpattern id='cmTicks' width='1cm' height='100%25' patternUnits='userSpaceOnUse' x='-1px'%3E%3Cline x1='0mm' x2='0mm' y2='30%25' /%3E%3Cline x1='1mm' x2='1mm' y2='10%25' /%3E%3Cline x1='2mm' x2='2mm' y2='10%25' /%3E%3Cline x1='3mm' x2='3mm' y2='10%25' /%3E%3Cline x1='4mm' x2='4mm' y2='10%25' /%3E%3Cline x1='5mm' x2='5mm' y2='25%25' /%3E%3Cline x1='6mm' x2='6mm' y2='10%25' /%3E%3Cline x1='7mm' x2='7mm' y2='10%25' /%3E%3Cline x1='8mm' x2='8mm' y2='10%25' /%3E%3Cline x1='9mm' x2='9mm' y2='10%25' /%3E%3Cline x1='10mm' x2='10mm' y2='30%25' /%3E%3C/pattern%3E%3Cpattern id='cmDigits' width='1cm' height='100%25' patternUnits='userSpaceOnUse'%3E%3Ctext y='30%25' dy='1em'%3E%3C/text%3E%3C/pattern%3E%3Cpattern id='cmNumbers' width='100%25' height='100%25' patternUnits='userSpaceOnUse'%3E%3Crect height='100%25' width='100%25' fill='url(%23cmTicks)'/%3E%3Crect height='100%25' width='100%25' fill='url(%23cmDigits)'/%3E%3Crect height='100%25' width='10cm' x='9cm' fill='url(%23cmTens)'/%3E%3Crect height='100%25' width='10cm' x='19cm' fill='url(%23cmTwenties)'/%3E%3Crect height='100%25' width='10cm' x='29cm' fill='url(%23cmThirties)'/%3E%3C/pattern%3E%3Cpattern id='inTens' width='1in' height='100%25' patternUnits='userSpaceOnUse'%3E%3Ctext y='70%25' x='1in' dx='-1ex'%3E1%3C/text%3E%3C/pattern%3E%3Cpattern id='inNumbers' width='100%25' height='100%25' patternUnits='userSpaceOnUse'%3E%3Crect height='100%25' width='100%25' fill='url(%23inchTicks)'/%3E%3Crect height='100%25' width='100%25' fill='url(%23inDigits)'/%3E%3Crect height='100%25' width='10in' x='9in' fill='url(%23inTens)'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='50%25' fill='url(%23cmNumbers)'/%3E%3C/svg%3E%0A"); } .ruler { --ruler1-bdw: 1px; --ruler1-c: #BBB; --ruler1-h: 8px; --ruler1-space: 5; --ruler2-bdw: 1px; --ruler2-c: #BBB; --ruler2-h: 20px; --ruler2-space: 50; background-attachment: fixed; background-image: linear-gradient(90deg, var(--ruler1-c) 0 var(--ruler1-bdw), transparent 0), linear-gradient(90deg, var(--ruler2-c) 0 var(--ruler2-bdw), transparent 0); background-repeat: repeat-x; background-size: calc(var(--ruler-unit) * var(--ruler1-space) * var(--ruler-x)) var(--ruler1-h), calc(var(--ruler-unit) * var(--ruler2-space) * var(--ruler-x)) var(--ruler2-h), var(--ruler1-h) calc(var(--ruler-unit) * var(--ruler1-space) * var(--ruler-y)), var(--ruler2-h) calc(var(--ruler-unit) * var(--ruler2-space) * var(--ruler-y)); }