Home/ Questions/Q 4616312
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T01:57:49+00:00

For <svg> element that is used under IE9 the style=overflow:hidden attribute is very important.

  • 0

For <svg> element that is used under IE9 the style="overflow:hidden" attribute is very important.

Unfortunately, when the svg object is created using jQuery svg-plugin using the following code…

$('#svg').svg({onLoad: drawMap});

…that attribute is not set and image can be drawn outside of limiting div (svg element).

Is it possible to set that attribute using jQuery svg-plugin? Or I should do that in some other way?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    After some testing, I’ve come up with this solution which requires the overflow to be set after the SVG element is drawn. This is a simplified example using the bundled svgBasics.html file that comes with the plugin:

    <html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery SVG Basics</title>
<style type="text/css">
@import "jquery.svg.css";

#svgbasics { width: 100px; height: 100px; border: 1px solid #484; }
</style>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js"></script>
<script type="text/javascript" src="jquery.svg.js"></script>
<script type="text/javascript">
$(function() {
    $('#svgbasics').svg({onLoad: drawInitial});
});

function drawInitial(svg) {
    svg.circle(75, 75, 50, {fill: 'none', stroke: 'red', 'stroke-width': 3});
    var g = svg.group({stroke: 'black', 'stroke-width': 2});
    svg.line(g, 15, 75, 135, 75);
    svg.line(g, 75, 15, 75, 135);
    $('#svgbasics').css({'overflow' : 'hidden'});
}

</script>
</head>
<body>
<div id="svgbasics"></div>
</body>
</html>
    • 0