<h1>Responsive SVG demo</h1>
<p><a href="https://madebymike.com.au/writing/svg-has-more-potential/">https://madebymike.com.au/writing/svg-has-more-potential/</a></p>
<br><br><br>
<div class="js-resizable">
<img class="js-resizable-image" src="https://madebymike.com.au/demos/svg/adaptive-border.svg">
</div>
body {
margin: 0 auto;
width: 80%;
text-align: center
}
.js-resizable {
position: relative;
width: 100%;
padding-right: 10px
}
.js-resizable-image {
width: 100%;
background: #FFF
}
.js-resizable-handle {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 10px;
border-right: dashed 2px black;
cursor: col-resize
}
.js-resizable-handle::after {
content: 'resize';
right: 5px;
top: 50%;
display: block;
position: absolute;
color: #888;
transform: translate(100%, -50%) rotate(90deg)
}
View Compiled
(function () {
var make_resizeable = function(obj){
var resize_handle = document.createElement('div');
resize_handle.classList.add('js-resizable-handle');
obj.appendChild(resize_handle);
resize_handle.addEventListener('mousedown', initDrag, false);
resize_handle.addEventListener('touchstart', initDrag, false);
var startX, startWidth, startHeight;
function initDrag(e) {
startX = e.clientX || e.touches[0].clientX;
startWidth = parseInt(document.defaultView.getComputedStyle(obj).width, 10);
document.documentElement.addEventListener('mousemove', doDrag, false);
document.documentElement.addEventListener('touchmove', doDrag, false);
document.documentElement.addEventListener('mouseup', stopDrag, false);
document.documentElement.addEventListener('touchend', stopDrag, false);
document.documentElement.addEventListener('touchcancel', stopDrag, false);
}
function doDrag(e) {
var newX = e.clientX || e.touches[0].clientX;
obj.style.width = (startWidth + newX - startX) + 'px';
}
function stopDrag(e) {
document.documentElement.removeEventListener('mousemove', doDrag, false);
document.documentElement.removeEventListener("touchmove", doDrag, false);
document.documentElement.removeEventListener('mouseup', stopDrag, false);
document.documentElement.removeEventListener('touchend', stopDrag, false);
document.documentElement.removeEventListener('touchcancel', stopDrag, false);
}
}
var resizable = document.querySelectorAll('.js-resizable');
for(var i=0; i < resizable.length; i++){
make_resizeable(resizable[i]);
}
window.onresize = function(event) {
for(var i=0; i < resizable.length; i++){
resizable[i].removeAttribute("style");
}
};
})();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.