Discuss general web development related issues. For Opera bugs, use the Bug Report Wizard: https://bugs.opera.com/wizard/. For Opera feature requests and queries, use Desktop wish-list: http://my.opera.com/community/forums/forum.dml?id=24.
By scipio 
Tuesday, 16. January 2007, 23:11:08
SVG Headaches
It's called an evolution in the article, but SVG is giving me some headaches already.
What I don't seem to be able to find easily in the tutorials available online are practical things (for beginners) like the following:
* How to add special characters to SVG <text>?
* Why isn't panning available by default in Opera when the contents need more space than the viewport offers? And why/how is panning limited in all directions after zooming in?
* Why does the following let you hover the child DIV in HTML+CSS
* Is it possible to link to external script and css files in SVG?
<style type="text/css">
div + div {display:none}
div:hover + div {display:block}
</style>
<body>
<div>
<div></div>
</div>
</body>whereas the child G in SVG will not remain visible in
<style type="text/css">
g + g {display:none}
g:hover + g {display:block}
</style>
<g>
<g></g>
</g>
</svg>Anyway, this may not be the best place to post my questions, but I don't know where else to ask them (well, maybe in MyOpera > Opera and cross-browser Web design).
By jax 
Wednesday, 24. January 2007, 15:11:02
By jeff_schiller Wednesday, 24. January 2007, 18:42:00
At least I can answer one question:
"Is it possible to link to external script and css files in SVG?"
Yes, as
mentioned in the article, you can link to external CSS by using the <?xml-stylesheet ...?> prolog at the top of your SVG file:
<?xml-stylesheet type="text/css" href="your.css" ?>
<svg>....</svg>
For external scripts you can do the same thing:
<script type="text/ecmascript" xlink:href="your.js"/>
but make sure you define your "xlink" namespace.
Googling on "svg external css" and "svg external script" also can give you answers. Like any new technology, just take it one step at a time, ask good questions like you're doing and try not to get too many headaches. You'll be a pro in no time.
Post edited Wednesday, 24. January 2007, 18:47:58
By xErath 
Wednesday, 24. January 2007, 18:46:34
Originally posted by scipio:
* Why isn't panning available by default in Opera when the contents need more space than the viewport offers?
BEcause it's a image, and setting dimensions will resize the image to fit.. I think.
Originally posted by scipio:
* Why does the following let you hover the child DIV in HTML+CSS
Not for me ?
By scipio Thursday, 25. January 2007, 22:21:59
Originally posted by xErath:
Not for me ?
What does it do for you then?
Originally posted by jeff_schiller:
Yes, as mentioned in the article
Did I miss that part? I guess so.
By MacDev_ed Wednesday, 31. January 2007, 20:03:06
Originally posted by scipio:
* Why does the following let you hover the child DIV in HTML+CSS
<style type="text/css">
div + div {display:none}
div:hover + div {display:block}
</style>
<body>
<div>
<div></div>
</div>
</body>whereas the child G in SVG will not remain visible in <style type="text/css">
g + g {display:none}
g:hover + g {display:block}
</style>
<g>
<g></g>
</g>
</svg>
Works fine, except that if you use the + selector then those won't match unless the elements share the same parent element. I couldn't get either of your examples working as they were. Here are my examples, tested fine in Opera 9.01:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
div + div {display:none; font-size:32px;}
div:hover + div {display:block; font-size:64px;}
</style>
</head>
<body>
<div>
Div 1
</div>
<div>invisible</div>
</body>
</html>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style type="text/css">
g + g {display:none}
g:hover + g {display:block}
</style>
<g>
<circle cy="20" r="5" fill="green"/>
</g>
<g><circle cy="20" cx="20" r="5" fill="blue"/></g>
</svg>
