Last active
December 14, 2022 16:59
-
-
Save diyism/547be9e971a8a1e92c1d307e208a241b to your computer and use it in GitHub Desktop.
svg non-scaling-stroke
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html><head> | |
<style> | |
#svgContainer { | |
background-color: #dedede; | |
} | |
#svgZoom { | |
transform-origin: 0% 0%; | |
} | |
</style> | |
<script src="https://stacksnippets.net/scripts/snippet-javascript-console.min.js?v=1"></script><style type="text/css">.as-console-wrapper { position: fixed; bottom: 0; left: 0; right: 0; max-height: 150px; overflow-y: scroll; overflow-x: hidden; border-top: 1px solid #000; display: none; } | |
.as-console { background: #e9e9e9; border: 1px solid #ccc; display: table; width: 100%; border-collapse: collapse; } | |
.as-console-row { display: table-row; font-family: monospace; font-size: 13px; } | |
.as-console-row:after { display: table-cell; padding: 3px 6px; color: rgba(0,0,0,.35); border: 1px solid #ccc; content: attr(data-date); vertical-align: top; } | |
.as-console-row + .as-console-row > * { border: 1px solid #ccc; } | |
.as-console-row-code { width: 100%; white-space: pre-wrap; padding: 3px 5px; display: table-cell; font-family: monospace; font-size: 13px; vertical-align: middle; } | |
.as-console-error:before { content: 'Error: '; color: #f00; } | |
.as-console-assert:before { content: 'Assertion failed: '; color: #f00; } | |
.as-console-info:before { content: 'Info: '; color: #00f; } | |
.as-console-warning:before { content: 'Warning: '; color: #e90 } | |
@-webkit-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } } | |
@-moz-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } } | |
@-ms-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } } | |
@keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } } | |
.as-console-row-code, .as-console-row:after { -webkit-animation: flash 1s; -moz-animation: flash 1s; -ms-animation: flash 1s; animation: flash 1s; }</style> | |
</head> | |
<body> | |
<h1>example about: vector-effect="non-scaling-stroke"</h1><br/> | |
(generate svg chart with https://github.com/diyism/dailychart)<br/> | |
<input type="range" min="1" max="500" value="100" class="slider" id="zoomRange"> | |
<span id="zoomValue">106%</span> | |
<div id="svgContainer"> | |
<svg id="svgZoom" height="80%" width="80%" style="transform: scale(1.06);" xmlns="http://www.w3.org/2000/svg" width="250" height="50"><clipPath id="dailychart-dc79t4qdj-positive"><rect x="0" y="0" width="250" height="30.48780487804861"></rect></clipPath><clipPath id="dailychart-dc79t4qdj-negative"><rect x="0" y="30.48780487804861" width="250" height="19.51219512195139" stroke="#e0e0e0" vector-effect="non-scaling-stroke" stroke-width="1" ></rect></clipPath><line x1="0" y1="30.48780487804861" x2="250" y2="30.48780487804861" stroke="#000000" vector-effect="non-scaling-stroke" stroke-width="1"></line><path d="M 0 29.26829268292639 L 2.717391304347826 30.48780487804861 L 5.434782608695652 29.878048780488196 L 8.152173913043478 31.70731707317083 L 10.869565217391305 31.70731707317083 L 13.58695652173913 29.878048780488196 L 16.304347826086957 31.097560975609028 L 19.02173913043478 32.926829268293055 L 21.73913043478261 32.31707317073125 L 24.456521739130437 32.31707317073125 L 27.17391304347826 32.926829268293055 L 29.891304347826086 31.70731707317083 L 32.608695652173914 32.926829268293055 L 35.32608695652174 32.31707317073125 L 38.04347826086956 30.48780487804861 L 40.76086956521739 32.926829268293055 L 43.47826086956522 34.14634146341389 L 46.19565217391305 35.36585365853611 L 48.913043478260875 39.63414634146319 L 51.630434782608695 39.63414634146319 L 54.34782608695652 39.02439024390278 L 57.06521739130435 39.63414634146319 L 59.78260869565217 40.243902439023614 L 62.5 43.902439024390276 L 65.21739130434783 45.73170731707292 L 67.93478260869566 42.682926829268055 L 70.65217391304348 45.121951219512496 L 73.36956521739131 44.5121951219507 L 76.08695652173913 48.17073170731736 L 78.80434782608695 50 L 81.52173913043478 48.78048780487778 L 84.23913043478261 47.56097560975556 L 86.95652173913044 46.34146341463334 L 89.67391304347827 44.5121951219507 L 92.3913043478261 44.5121951219507 L 95.10869565217392 45.121951219512496 L 97.82608695652175 47.56097560975556 L 100.54347826086956 42.07317073170764 L 103.26086956521739 40.853658536585414 L 105.97826086956522 39.63414634146319 L 108.69565217391305 38.41463414634097 L 111.41304347826087 28.658536585365972 L 114.1304347826087 27.43902439024375 L 116.84782608695653 32.31707317073125 L 119.56521739130434 29.878048780488196 L 122.28260869565217 29.878048780488196 L 125 26.829268292683334 L 127.71739130434783 26.219512195121528 L 130.43478260869566 25.609756097561114 L 133.15217391304347 26.219512195121528 L 135.8695652173913 29.26829268292639 L 138.58695652173913 32.31707317073125 L 141.30434782608697 29.878048780488196 L 144.02173913043478 29.878048780488196 L 146.73913043478262 32.31707317073125 L 149.45652173913044 35.36585365853611 L 152.17391304347825 32.31707317073125 L 154.8913043478261 31.097560975609028 L 157.6086956521739 32.926829268293055 L 160.32608695652175 29.878048780488196 L 163.04347826086956 27.43902439024375 L 165.7608695652174 20.73170731707361 L 168.47826086956522 22.56097560975625 L 171.19565217391306 19.512195121951386 L 173.91304347826087 18.902439024389583 L 176.6304347826087 21.341463414634028 L 179.34782608695653 20.121951219511807 L 182.06521739130434 20.73170731707361 L 184.7826086956522 17.682926829268744 L 187.5 12.195121951219448 L 190.21739130434784 0.6097560975604139 L 192.93478260869566 0 L 195.6521739130435 4.268292682927083 L 198.3695652173913 3.048780487804862 L 201.08695652173913 2.439024390244441 L 203.80434782608697 2.439024390244441 L 206.52173913043478 5.48780487804931 L 209.23913043478262 3.658536585365283 L 211.95652173913044 5.48780487804931 L 214.67391304347828 3.048780487804862 L 217.3913043478261 1.8292682926826416 L 220.1086956521739 6.097560975609724 L 222.82608695652175 5.48780487804931 L 225.54347826086956 1.8292682926826416 L 228.2608695652174 5.48780487804931 L 230.97826086956522 5.48780487804931 L 233.69565217391306 4.878048780487497 L 236.41304347826087 6.097560975609724 L 239.1304347826087 5.48780487804931 L 241.84782608695653 6.707317073170138 L 244.56521739130434 7.926829268292366 L 247.2826086956522 6.097560975609724 L 250 3.658536585365283 V 50 H 0 Z" fill="none" stroke-width="0" stroke-linejoin="bevel" stroke="none" clip-path="url(#dailychart-dc79t4qdj-positive)"></path><path d="M 0 29.26829268292639 L 2.717391304347826 30.48780487804861 L 5.434782608695652 29.878048780488196 L 8.152173913043478 31.70731707317083 L 10.869565217391305 31.70731707317083 L 13.58695652173913 29.878048780488196 L 16.304347826086957 31.097560975609028 L 19.02173913043478 32.926829268293055 L 21.73913043478261 32.31707317073125 L 24.456521739130437 32.31707317073125 L 27.17391304347826 32.926829268293055 L 29.891304347826086 31.70731707317083 L 32.608695652173914 32.926829268293055 L 35.32608695652174 32.31707317073125 L 38.04347826086956 30.48780487804861 L 40.76086956521739 32.926829268293055 L 43.47826086956522 34.14634146341389 L 46.19565217391305 35.36585365853611 L 48.913043478260875 39.63414634146319 L 51.630434782608695 39.63414634146319 L 54.34782608695652 39.02439024390278 L 57.06521739130435 39.63414634146319 L 59.78260869565217 40.243902439023614 L 62.5 43.902439024390276 L 65.21739130434783 45.73170731707292 L 67.93478260869566 42.682926829268055 L 70.65217391304348 45.121951219512496 L 73.36956521739131 44.5121951219507 L 76.08695652173913 48.17073170731736 L 78.80434782608695 50 L 81.52173913043478 48.78048780487778 L 84.23913043478261 47.56097560975556 L 86.95652173913044 46.34146341463334 L 89.67391304347827 44.5121951219507 L 92.3913043478261 44.5121951219507 L 95.10869565217392 45.121951219512496 L 97.82608695652175 47.56097560975556 L 100.54347826086956 42.07317073170764 L 103.26086956521739 40.853658536585414 L 105.97826086956522 39.63414634146319 L 108.69565217391305 38.41463414634097 L 111.41304347826087 28.658536585365972 L 114.1304347826087 27.43902439024375 L 116.84782608695653 32.31707317073125 L 119.56521739130434 29.878048780488196 L 122.28260869565217 29.878048780488196 L 125 26.829268292683334 L 127.71739130434783 26.219512195121528 L 130.43478260869566 25.609756097561114 L 133.15217391304347 26.219512195121528 L 135.8695652173913 29.26829268292639 L 138.58695652173913 32.31707317073125 L 141.30434782608697 29.878048780488196 L 144.02173913043478 29.878048780488196 L 146.73913043478262 32.31707317073125 L 149.45652173913044 35.36585365853611 L 152.17391304347825 32.31707317073125 L 154.8913043478261 31.097560975609028 L 157.6086956521739 32.926829268293055 L 160.32608695652175 29.878048780488196 L 163.04347826086956 27.43902439024375 L 165.7608695652174 20.73170731707361 L 168.47826086956522 22.56097560975625 L 171.19565217391306 19.512195121951386 L 173.91304347826087 18.902439024389583 L 176.6304347826087 21.341463414634028 L 179.34782608695653 20.121951219511807 L 182.06521739130434 20.73170731707361 L 184.7826086956522 17.682926829268744 L 187.5 12.195121951219448 L 190.21739130434784 0.6097560975604139 L 192.93478260869566 0 L 195.6521739130435 4.268292682927083 L 198.3695652173913 3.048780487804862 L 201.08695652173913 2.439024390244441 L 203.80434782608697 2.439024390244441 L 206.52173913043478 5.48780487804931 L 209.23913043478262 3.658536585365283 L 211.95652173913044 5.48780487804931 L 214.67391304347828 3.048780487804862 L 217.3913043478261 1.8292682926826416 L 220.1086956521739 6.097560975609724 L 222.82608695652175 5.48780487804931 L 225.54347826086956 1.8292682926826416 L 228.2608695652174 5.48780487804931 L 230.97826086956522 5.48780487804931 L 233.69565217391306 4.878048780487497 L 236.41304347826087 6.097560975609724 L 239.1304347826087 5.48780487804931 L 241.84782608695653 6.707317073170138 L 244.56521739130434 7.926829268292366 L 247.2826086956522 6.097560975609724 L 250 3.658536585365283 V 0 H 0 Z" fill="none" stroke-width="0" stroke-linejoin="bevel" stroke="none" clip-path="url(#dailychart-dc79t4qdj-negative)"></path><path d="M 0 29.26829268292639 L 2.717391304347826 30.48780487804861 L 5.434782608695652 29.878048780488196 L 8.152173913043478 31.70731707317083 L 10.869565217391305 31.70731707317083 L 13.58695652173913 29.878048780488196 L 16.304347826086957 31.097560975609028 L 19.02173913043478 32.926829268293055 L 21.73913043478261 32.31707317073125 L 24.456521739130437 32.31707317073125 L 27.17391304347826 32.926829268293055 L 29.891304347826086 31.70731707317083 L 32.608695652173914 32.926829268293055 L 35.32608695652174 32.31707317073125 L 38.04347826086956 30.48780487804861 L 40.76086956521739 32.926829268293055 L 43.47826086956522 34.14634146341389 L 46.19565217391305 35.36585365853611 L 48.913043478260875 39.63414634146319 L 51.630434782608695 39.63414634146319 L 54.34782608695652 39.02439024390278 L 57.06521739130435 39.63414634146319 L 59.78260869565217 40.243902439023614 L 62.5 43.902439024390276 L 65.21739130434783 45.73170731707292 L 67.93478260869566 42.682926829268055 L 70.65217391304348 45.121951219512496 L 73.36956521739131 44.5121951219507 L 76.08695652173913 48.17073170731736 L 78.80434782608695 50 L 81.52173913043478 48.78048780487778 L 84.23913043478261 47.56097560975556 L 86.95652173913044 46.34146341463334 L 89.67391304347827 44.5121951219507 L 92.3913043478261 44.5121951219507 L 95.10869565217392 45.121951219512496 L 97.82608695652175 47.56097560975556 L 100.54347826086956 42.07317073170764 L 103.26086956521739 40.853658536585414 L 105.97826086956522 39.63414634146319 L 108.69565217391305 38.41463414634097 L 111.41304347826087 28.658536585365972 L 114.1304347826087 27.43902439024375 L 116.84782608695653 32.31707317073125 L 119.56521739130434 29.878048780488196 L 122.28260869565217 29.878048780488196 L 125 26.829268292683334 L 127.71739130434783 26.219512195121528 L 130.43478260869566 25.609756097561114 L 133.15217391304347 26.219512195121528 L 135.8695652173913 29.26829268292639 L 138.58695652173913 32.31707317073125 L 141.30434782608697 29.878048780488196 L 144.02173913043478 29.878048780488196 L 146.73913043478262 32.31707317073125 L 149.45652173913044 35.36585365853611 L 152.17391304347825 32.31707317073125 L 154.8913043478261 31.097560975609028 L 157.6086956521739 32.926829268293055 L 160.32608695652175 29.878048780488196 L 163.04347826086956 27.43902439024375 L 165.7608695652174 20.73170731707361 L 168.47826086956522 22.56097560975625 L 171.19565217391306 19.512195121951386 L 173.91304347826087 18.902439024389583 L 176.6304347826087 21.341463414634028 L 179.34782608695653 20.121951219511807 L 182.06521739130434 20.73170731707361 L 184.7826086956522 17.682926829268744 L 187.5 12.195121951219448 L 190.21739130434784 0.6097560975604139 L 192.93478260869566 0 L 195.6521739130435 4.268292682927083 L 198.3695652173913 3.048780487804862 L 201.08695652173913 2.439024390244441 L 203.80434782608697 2.439024390244441 L 206.52173913043478 5.48780487804931 L 209.23913043478262 3.658536585365283 L 211.95652173913044 5.48780487804931 L 214.67391304347828 3.048780487804862 L 217.3913043478261 1.8292682926826416 L 220.1086956521739 6.097560975609724 L 222.82608695652175 5.48780487804931 L 225.54347826086956 1.8292682926826416 L 228.2608695652174 5.48780487804931 L 230.97826086956522 5.48780487804931 L 233.69565217391306 4.878048780487497 L 236.41304347826087 6.097560975609724 L 239.1304347826087 5.48780487804931 L 241.84782608695653 6.707317073170138 L 244.56521739130434 7.926829268292366 L 247.2826086956522 6.097560975609724 L 250 3.658536585365283" fill="none" vector-effect="non-scaling-stroke" stroke-width="1" stroke-linejoin="bevel" stroke="#33AE45" clip-path="url(#dailychart-dc79t4qdj-positive)"></path><path d="M 0 29.26829268292639 L 2.717391304347826 30.48780487804861 L 5.434782608695652 29.878048780488196 L 8.152173913043478 31.70731707317083 L 10.869565217391305 31.70731707317083 L 13.58695652173913 29.878048780488196 L 16.304347826086957 31.097560975609028 L 19.02173913043478 32.926829268293055 L 21.73913043478261 32.31707317073125 L 24.456521739130437 32.31707317073125 L 27.17391304347826 32.926829268293055 L 29.891304347826086 31.70731707317083 L 32.608695652173914 32.926829268293055 L 35.32608695652174 32.31707317073125 L 38.04347826086956 30.48780487804861 L 40.76086956521739 32.926829268293055 L 43.47826086956522 34.14634146341389 L 46.19565217391305 35.36585365853611 L 48.913043478260875 39.63414634146319 L 51.630434782608695 39.63414634146319 L 54.34782608695652 39.02439024390278 L 57.06521739130435 39.63414634146319 L 59.78260869565217 40.243902439023614 L 62.5 43.902439024390276 L 65.21739130434783 45.73170731707292 L 67.93478260869566 42.682926829268055 L 70.65217391304348 45.121951219512496 L 73.36956521739131 44.5121951219507 L 76.08695652173913 48.17073170731736 L 78.80434782608695 50 L 81.52173913043478 48.78048780487778 L 84.23913043478261 47.56097560975556 L 86.95652173913044 46.34146341463334 L 89.67391304347827 44.5121951219507 L 92.3913043478261 44.5121951219507 L 95.10869565217392 45.121951219512496 L 97.82608695652175 47.56097560975556 L 100.54347826086956 42.07317073170764 L 103.26086956521739 40.853658536585414 L 105.97826086956522 39.63414634146319 L 108.69565217391305 38.41463414634097 L 111.41304347826087 28.658536585365972 L 114.1304347826087 27.43902439024375 L 116.84782608695653 32.31707317073125 L 119.56521739130434 29.878048780488196 L 122.28260869565217 29.878048780488196 L 125 26.829268292683334 L 127.71739130434783 26.219512195121528 L 130.43478260869566 25.609756097561114 L 133.15217391304347 26.219512195121528 L 135.8695652173913 29.26829268292639 L 138.58695652173913 32.31707317073125 L 141.30434782608697 29.878048780488196 L 144.02173913043478 29.878048780488196 L 146.73913043478262 32.31707317073125 L 149.45652173913044 35.36585365853611 L 152.17391304347825 32.31707317073125 L 154.8913043478261 31.097560975609028 L 157.6086956521739 32.926829268293055 L 160.32608695652175 29.878048780488196 L 163.04347826086956 27.43902439024375 L 165.7608695652174 20.73170731707361 L 168.47826086956522 22.56097560975625 L 171.19565217391306 19.512195121951386 L 173.91304347826087 18.902439024389583 L 176.6304347826087 21.341463414634028 L 179.34782608695653 20.121951219511807 L 182.06521739130434 20.73170731707361 L 184.7826086956522 17.682926829268744 L 187.5 12.195121951219448 L 190.21739130434784 0.6097560975604139 L 192.93478260869566 0 L 195.6521739130435 4.268292682927083 L 198.3695652173913 3.048780487804862 L 201.08695652173913 2.439024390244441 L 203.80434782608697 2.439024390244441 L 206.52173913043478 5.48780487804931 L 209.23913043478262 3.658536585365283 L 211.95652173913044 5.48780487804931 L 214.67391304347828 3.048780487804862 L 217.3913043478261 1.8292682926826416 L 220.1086956521739 6.097560975609724 L 222.82608695652175 5.48780487804931 L 225.54347826086956 1.8292682926826416 L 228.2608695652174 5.48780487804931 L 230.97826086956522 5.48780487804931 L 233.69565217391306 4.878048780487497 L 236.41304347826087 6.097560975609724 L 239.1304347826087 5.48780487804931 L 241.84782608695653 6.707317073170138 L 244.56521739130434 7.926829268292366 L 247.2826086956522 6.097560975609724 L 250 3.658536585365283" fill="none" stroke-width="1" vector-effect="non-scaling-stroke" stroke-linejoin="bevel" stroke="#EB5757" clip-path="url(#dailychart-dc79t4qdj-negative)"></path></svg> | |
</div> | |
<script type="text/javascript"> | |
const slider = document.getElementById("zoomRange"); | |
const zvgZoom = document.getElementById("svgZoom"); | |
const zoomValue = document.getElementById("zoomValue"); | |
slider.oninput = function() { | |
//console.log('zoom', this.value / 100); | |
zoomValue.innerText = `${this.value}%`; | |
zvgZoom.style.transform = `scale(${this.value / 100})`; | |
} | |
</script> | |
<div class="as-console-wrapper"><div class="as-console"></div></div></body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment