Skip to content

Instantly share code, notes, and snippets.

@diyism
Last active December 14, 2022 16:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save diyism/547be9e971a8a1e92c1d307e208a241b to your computer and use it in GitHub Desktop.
Save diyism/547be9e971a8a1e92c1d307e208a241b to your computer and use it in GitHub Desktop.
svg non-scaling-stroke
<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