jQuery round corner (use SVG+VML)
by ilumin
css-------------------------------------------------------
/** for IE ***********************************************************/
v\:* {
behavior: url(#default#VML)
}
v\:roundrect {
display: block;
width: 100%;
zoom: 1
}
.container {
z-index: 22;
margin: 20px;
position: relative
}
.content {
padding-right: 1em; padding-left: 1em; padding-bottom: 1em; padding-top: 1em;
z-index: 4;
font: 1.2em/1.2 Arial;
position: relative;
}
/** for FF ***********************************************************/
.container object[type="image/svg+xml"] {
position:absolute;
left:0;right:0;top:0;bottom:0;
width:100%;height:100%;
z-index:-1;
}
v\:* {
behavior: url(#default#VML)
}
v\:roundrect {
display: block;
width: 100%;
zoom: 1
}
.container {
z-index: 22;
margin: 20px;
position: relative
}
.content {
padding-right: 1em; padding-left: 1em; padding-bottom: 1em; padding-top: 1em;
z-index: 4;
font: 1.2em/1.2 Arial;
position: relative;
}
/** for FF ***********************************************************/
.container object[type="image/svg+xml"] {
position:absolute;
left:0;right:0;top:0;bottom:0;
width:100%;height:100%;
z-index:-1;
}
js-------------------------------------------------------------
$r = 5;
$fill = '#58f450';
$stroke = '#35271e';
$swidth = 1;
if($.browser.msie)
{
$r = ($r/2)*(1/100);
$round = '<v:roundrect arcsize="'+$r+'" fillcolor="'+$fill+'" strokecolor="'+$stroke+'" strokeweight="'+$swidth+'px"></v:roundrect>';
$('.container').wrap($round);
}
else
{
$round = '<object name="rbg" type="image/svg+xml" data=\'data:image/svg+xml, <svg version="1.1" xmlns="http://www.w3.org/2000/svg" > <rect x="0" y="0" rx="'+$r+'px" ry="'+$r+'px" width="100%" height="100%" fill="'+$fill+'" stroke="'+$stroke+'" stroke-width="'+$swidth+'px"> <pattern width="100%" height="100%"> </pattern> </rect> </svg>\'> </object>';
$('.container').append($round);
}
$fill = '#58f450';
$stroke = '#35271e';
$swidth = 1;
if($.browser.msie)
{
$r = ($r/2)*(1/100);
$round = '<v:roundrect arcsize="'+$r+'" fillcolor="'+$fill+'" strokecolor="'+$stroke+'" strokeweight="'+$swidth+'px"></v:roundrect>';
$('.container').wrap($round);
}
else
{
$round = '<object name="rbg" type="image/svg+xml" data=\'data:image/svg+xml, <svg version="1.1" xmlns="http://www.w3.org/2000/svg" > <rect x="0" y="0" rx="'+$r+'px" ry="'+$r+'px" width="100%" height="100%" fill="'+$fill+'" stroke="'+$stroke+'" stroke-width="'+$swidth+'px"> <pattern width="100%" height="100%"> </pattern> </rect> </svg>\'> </object>';
$('.container').append($round);
}
HTML----------------------------------------------------------
<div class="container">
<div class="content">
SVG is a language for describing two-dimensional graphics and graphical applications in XML. SVG 1.1 is a W3C Recommendation and forms the core of the current SVG developments. SVG Tiny 1.2SVG Mobile Profiles: SVG Basic and SVG Tiny are targeted to resource-limited devices and are part of the 3GPP platform for third generation mobile phones. SVG Print is a set of guidelines to produce final-form documents in XML suitable for archiving and printing. Read more about SVG.
The Vector Markup Language (VML) supports the markup of vector graphic information in the same way that HTML supports the markup of textual information. Within VML the content is composed of paths described using connected lines and curves. The markup gives semantic and presentation information for the paths.
</div>
</div>
<div class="content">
SVG is a language for describing two-dimensional graphics and graphical applications in XML. SVG 1.1 is a W3C Recommendation and forms the core of the current SVG developments. SVG Tiny 1.2SVG Mobile Profiles: SVG Basic and SVG Tiny are targeted to resource-limited devices and are part of the 3GPP platform for third generation mobile phones. SVG Print is a set of guidelines to produce final-form documents in XML suitable for archiving and printing. Read more about SVG.
The Vector Markup Language (VML) supports the markup of vector graphic information in the same way that HTML supports the markup of textual information. Within VML the content is composed of paths described using connected lines and curves. The markup gives semantic and presentation information for the paths.
</div>
</div>
result----------------------------------------------------------
SVG is a language for describing two-dimensional graphics
and graphical applications in XML.
SVG 1.1 is a W3C Recommendation
and forms the core of the current SVG developments.
SVG Tiny 1.2SVG Mobile
Profiles: SVG Basic and SVG Tiny are targeted to
resource-limited devices and are part of the 3GPP platform for third
generation mobile phones. SVG Print
is a set of guidelines to produce final-form documents in XML
suitable for archiving and printing.
Read more about SVG.
The Vector Markup Language (VML) supports the markup of vector graphic information in the same way that HTML supports the markup of textual information. Within VML the content is composed of paths described using connected lines and curves. The markup gives semantic and presentation information for the paths.
The Vector Markup Language (VML) supports the markup of vector graphic information in the same way that HTML supports the markup of textual information. Within VML the content is composed of paths described using connected lines and curves. The markup gives semantic and presentation information for the paths.
SVG is a language for describing two-dimensional graphics
and graphical applications in XML.
SVG 1.1 is a W3C Recommendation
and forms the core of the current SVG developments.
SVG Tiny 1.2SVG Mobile
Profiles: SVG Basic and SVG Tiny are targeted to
resource-limited devices and are part of the 3GPP platform for third
generation mobile phones. SVG Print
is a set of guidelines to produce final-form documents in XML
suitable for archiving and printing.
Read more about SVG.
The Vector Markup Language (VML) supports the markup of vector graphic information in the same way that HTML supports the markup of textual information. Within VML the content is composed of paths described using connected lines and curves. The markup gives semantic and presentation information for the paths.
The Vector Markup Language (VML) supports the markup of vector graphic information in the same way that HTML supports the markup of textual information. Within VML the content is composed of paths described using connected lines and curves. The markup gives semantic and presentation information for the paths.