CODEWITHSUNDEEP
javascriptjqueryhtmlsvg
Budda
Budda

Reputation: 18353

How to define 'overflow' attribute

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?

Upvotes: 2

Views: 351

Answers (1)

onteria_
onteria_

Reputation: 70557

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>

Upvotes: 1

Related Questions