Если тыкать мышь на svg, то не работает. Если на бордер - более-менее работает.
Причем у круглого бордера активны только четыре верхних-нижних-левых-правых точек - остальное перекрыто квадратным внутренним #document
<style>
object {
border:4px solid black;
height:82px;
width:82px;
border-radius:50%;
}
</style>
<body>
<object id="ball" type="image/svg+xml" data="https://js.cx/clipart/ball.svg"> </object>
</body>
<script>
var ball = document.getElementById('ball');
// ball.onload = function() {
// var image = ball.contentWindow.document.querySelector('svg');
// image.onmousedown = function() {
// return false;
// }
// }
ball.onmousedown = function(e) {
ball.style.position = 'absolute';
document.body.appendChild(ball);
moveAt(e);
ball.style.zIndex = 1000; // над другими элементами
function moveAt(e) {
ball.style.left = e.pageX - ball.offsetWidth / 2 + 'px';
ball.style.top = e.pageY - ball.offsetHeight / 2 + 'px';
}
document.onmousemove = function(e) {
moveAt(e);
};
ball.onmouseup = function() {
document.onmousemove = null;
ball.onmouseup = null;
};
}
ball.ondragstart = function() {
return false;
};
</script>
Можно было бы попробовать поиграть с содержимым object (например, строки 10-15), но кроссдоменный запрет...
А без object svg себя прекрасно ведет...
https://learn.javascript.ru/drag-and-drop