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 attribut开发者_如何学Ce 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?
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>
加载中,请稍侯......
精彩评论