My OperaThe My Opera forums have been replaced with forums.opera.com. Please head over there to discuss Opera's products and features
See the new ForumsYou need to be logged in to post in the forums. If you do not have an account, please sign up first.
attribute^=value cannot woking on loaded svg by jQuery SVG plugin but can work on firefox!Bug?
The newest: I find the question is the opera! It can work in the firefox!But I need opera to use it,does it have any solution? PS:waiting the jquery or opera's uncoming version?I want to ask why $("g[id^=trans]") cannot work,but the $("g") can?How to fix it? The load method of jQuery SVG plugin must work under the server such as Apache.(I don't know why?But it will not work if not under the Apache)
PS:some friend test=>
document.querySelectorAll('g[id^=trans]') cannot find the [XXX]??? This is the bug point?
The javascript ：
<html>
<head>
<script type="text/javascript"
src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript"
src="http://keith-wood.name/js/jquery.svg.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#svgload").svg();
var svg = $('#svgload').svg('get');
$('#loadsvg').click(function() {
svg.load('red.svg',{onLoad:loadDone});
})
function loadDone(svg, error) {
svg.text(10, 20, error || 'Loaded into ' + this.id);
}
$('#transform').click(function(){
alert($("g").attr("transform"));
alert("before="+svg.toSVG());//Can see the id=transxxx,but cannot catch!
$('g[id^="trans"]').attr("transform","translate(20,5)");//this can work!
//$("g").attr("transform","translate(20,5)");//but this cannot work!
alert("after="+svg.toSVG());//cannot change the attribute
});
});
</script>
</head>
<body>
<div id="svgload" width="200px" height="200px" >
</div>
<button id="loadsvg" type="button">loadsvg</button>
<button id="transform" type="button">transform</button>
</body>
</html>
The loded SVG:
(It can be write with the notepad and save as UTF-8 format)
red.svg
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<g id="trans001">
<rect x="35" y="50" width="20" height="20" fill="#F3D70A" stroke-width="4"/>
<line x1="20" y1="40" x2="80" y2="40" stroke-width="5"/>
<circle cx="20" cy="60" r="10" fill="red" stroke="blue" stroke-width="5"/></g>
<g id="trans002"><rect width="35" height="20" x="20" y="90" fill="blue">
</rect></g>
</svg>
