gmane.text.xml.svg.devel

Manipulating SVG in HTML using JavaScript

Jason — 2012-05-18T11:05:25

I have a project I'm working on. My goal is to display 18 images in a single HTML document in the same space. The first is just text and is put in using standard HTML. Over that I have placed a SVG image and I'd like to do drawings in it using JavaScript. I only want one server call for the entire map set. I know how to do the math to get the images and text in the SVG but I can't get the JavaScript to do the drawings.

Here is what it should look like: http://evony.net23.net
Here is the code that's not working: http://evony.net23.net/maps.htm

The one that works is 18 different pages and takes up over 175kb of file space. The one that doesn't work yet will be less than 10kb.

Any suggestions would be appreciated.

Jason

------------------------------------

-----
To unsubscribe send a message to: svg-developers-unsubscribe< at >yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----Yahoo! Groups Links

<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
Individual Email | Traditional

<*> To change settings online go to:
http://groups.yahoo.com/group/svg-developers/join
(Yahoo! ID required)

<*> To change settings via email:
svg-developers-digest< at >yahoogroups.com
svg-developers-fullfeatured< at >yahoogroups.com

<*> To unsubscribe from this group, send an email to:
svg-developers-unsubscribe< at >yahoogroups.com

<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/

Get first parameter of rotate function

svgdeveloper — 2012-05-20T11:41:11

Hello,

I just joined your SVG group. I'm working on a web application which is based on SVG. I have a little problem concerning the rotate parameters of a text element. I want to fetch the first parameter of a rotate function which represents the rotation angle in degrees.

I use the jQuery SVG plugin of Keith Wood to use jQuery to interact with the SVG canvas. To fetch the angle I use the indexOf and substring methods of JavaScript. For instance:

      
        currentFontRotation = currentId.attr('transform');
        var bracket = currentFontRotation.indexOf('rotate(');
        var comma = currentFontRotation.indexOf(',');
        bracket = bracket +7;       
        currentFontRotationNumber = currentFontRotation.substring(bracket, comma );

The variable currentId represents the selected text element. Is there a more clean way to get the angle. I think it's a pretty dirty method to use the indexOf and substring methods in this case.

Thanks



------------------------------------

-----
To unsubscribe send a message to: svg-developers-unsubscribe< at >yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
    Individual Email | Traditional

<*> To change settings online go to:
    http://groups.yahoo.com/group/svg-developers/join
    (Yahoo! ID required)

<*> To change settings via email:
    svg-developers-digest< at >yahoogroups.com 
    svg-developers-fullfeatured< at >yahoogroups.com

<*> To unsubscribe from this group, send an email to:
    svg-developers-unsubscribe< at >yahoogroups.com

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/

Filter inheritance

honyk — 2012-05-18T20:50:51

Dear All,

I've tried to apply a drop-shadow filter, but encountered the following
inheritance issue, see this small test case
http://hroska.cz/other/filter.svg

While there is a child element with the filter attribute set to 'none', the
filter of its ancestor is still aplied to it (FF and Chrome).

Is it bug or according to the spec?

While there is a quite easy workaround for this example, my real file is
much more complex :-(

Any idea?

Thanks, Jan





------------------------------------

-----
To unsubscribe send a message to: svg-developers-unsubscribe< at >yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
    Individual Email | Traditional

<*> To change settings online go to:
    http://groups.yahoo.com/group/svg-developers/join
    (Yahoo! ID required)

<*> To change settings via email:
    svg-developers-digest< at >yahoogroups.com 
    svg-developers-fullfeatured< at >yahoogroups.com

<*> To unsubscribe from this group, send an email to:
    svg-developers-unsubscribe< at >yahoogroups.com

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/

PlanetSVG is listed as suspicious

David Dailey — 2012-05-15T18:15:32

http://www.google.com/safebrowsing/diagnostic?site=http://planetsvg.com/tool
s/mime.php
<http://www.google.com/safebrowsing/diagnostic?site=http://planetsvg.com/too
ls/mime.php&hl=en> &hl=en 

 

Interesting. I was trying to get to info about setting mimetypes, but the
site seems to have been the target of some mischief.

 

Cheers

D



[Non-text portions of this message have been removed]



------------------------------------

-----
To unsubscribe send a message to: svg-developers-unsubscribe< at >yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
    Individual Email | Traditional

<*> To change settings online go to:
    http://groups.yahoo.com/group/svg-developers/join
    (Yahoo! ID required)

<*> To change settings via email:
    svg-developers-digest< at >yahoogroups.com 
    svg-developers-fullfeatured< at >yahoogroups.com

<*> To unsubscribe from this group, send an email to:
    svg-developers-unsubscribe< at >yahoogroups.com

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/

video affected by SVG clip-path

David Dailey — 2012-05-15T23:36:35

I have put a video in an HTML5 document and have succeeded in having it
clipped by an SVG clip-path (and also filtered) as follows:

 

<style>video {position:absolute;  filter: url(#f1);clip-path: url(#c1); }

                                p{left:50%;top:5%;
position:absolute;clip-path: url(#c1);}

</style>  

 

The clip path is later defined within an SVG tag on the same page.

 

This only seems to work in Firefox though. Would it be absurd to think that
it might someday work elsewhere as well?

 

The other experiments I've done (trying to accomplish similar effects)
involve

a)      Using <foreignObject> in svg - with an <iframe> containing the
video. Seems only to work in Firefox again - Opera displays the  video, but
it only plays if I actively resize the window, as soon as I stop dragging
the corner of the window, the video stops

b)      Using <video> in svg - only Opera seems to do this, but then I can't
use all the fun attributes associated with video.

 

So two questions really:

1.       Is <video> in SVG likely to be improved in other browsers? Will the
other attributes (like controls="controls"  muted="muted" loop="loop"
autoplay="autoplay" ) migrate into SVG 2.0?

2.       Is the style approach above (and discussed at
https://developer.mozilla.org/En/Applying_SVG_effects_to_HTML_content )
supposed to work, eventually, in the other browsers, or is this another area
where they all have different ideas of how the spec reads, and or what makes
for good design?

 

I would show my examples, but I don't seem to know how to configure my
server to serve OGG or MP4 properly. 

 

I guess that leads to a question: how to configure an Apache server so that
it properly serves OGG and MP4 mime types (I tried an .htaccess file in my
main html directory(each user has his or her own on this server)?

 

Thanks in advance

David



[Non-text portions of this message have been removed]



------------------------------------

-----
To unsubscribe send a message to: svg-developers-unsubscribe< at >yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
    Individual Email | Traditional

<*> To change settings online go to:
    http://groups.yahoo.com/group/svg-developers/join
    (Yahoo! ID required)

<*> To change settings via email:
    svg-developers-digest< at >yahoogroups.com 
    svg-developers-fullfeatured< at >yahoogroups.com

<*> To unsubscribe from this group, send an email to:
    svg-developers-unsubscribe< at >yahoogroups.com

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/

Fw: Reflection in a puddle

Arif Burhan — 2012-05-12T23:54:18

I now have a Chrome / webkit compliant example of the puddle effect example below -
see:          http://irony-maiden.com/SVG/Cr-Puddle.htm
[    all  <clipPath> blocks need to be within a <defs> block    ]
Kind regards,
Arif Burhan

--- On Thu, 10/5/12, Arif Burhan <aburhan2000< at >yahoo.co.uk> wrote:

From: Arif Burhan <aburhan2000< at >yahoo.co.uk>
Subject: [svg-developers] Reflection in a puddle
To: svg-developers< at >yahoogroups.com
Date: Thursday, 10 May, 2012, 9:02
















 



  


    
      
      
      To see an example of a reflection in a puddle view:



     http://irony-maiden.com/SVG/Puddle.htm



( Best viewed in Mozilla Firefox or Seamonkey )



regards,



Arif Burhan



[Non-text portions of this message have been removed]





    
     

    
    






  










[Non-text portions of this message have been removed]



------------------------------------

-----
To unsubscribe send a message to: svg-developers-unsubscribe< at >yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
    Individual Email | Traditional

<*> To change settings online go to:
    http://groups.yahoo.com/group/svg-developers/join
    (Yahoo! ID required)

<*> To change settings via email:
    svg-developers-digest< at >yahoogroups.com 
    svg-developers-fullfeatured< at >yahoogroups.com

<*> To unsubscribe from this group, send an email to:
    svg-developers-unsubscribe< at >yahoogroups.com

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/

Getting current time in svg file...

royhoja — 2012-05-14T15:45:35

Hi,
I am trying to add current time to the svg file I have using Ecmascript.
following is the code I have. Unfortunately its not working . can someone help me fix it?
Thank you

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
<text x="0" y="15" fill="red">It is now
<script type="text/javascript">
<![CDATA[
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
document.write(month + "/" + day + "/" + year);
]]>
</script>
</text>
</svg> 



------------------------------------

-----
To unsubscribe send a message to: svg-developers-unsubscribe< at >yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
    Individual Email | Traditional

<*> To change settings online go to:
    http://groups.yahoo.com/group/svg-developers/join
    (Yahoo! ID required)

<*> To change settings via email:
    svg-developers-digest< at >yahoogroups.com 
    svg-developers-fullfeatured< at >yahoogroups.com

<*> To unsubscribe from this group, send an email to:
    svg-developers-unsubscribe< at >yahoogroups.com

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/

Need Guidelines

barkha jasani — 2012-05-10T14:10:49

I am a new bea to SVG,Basically i'm a java developer.And Currently i 
have got a requirement to create a POC with JAVA and SVG which includes 
generating Floor wise Dynamic(Interactive) maps

1.       Using SVG model provided by a designer as the
background of the map
·         Receive an SVG file that represent static floor
map and use it as a resource in the code
·         Use a dedicated layer for the map background
·         Implement zoom-in and out of the background and
all sub entities by point-and-click on the map. Point clicked is centered as
part of the zoom operation
2.       Using drag and drop to add Readers to the map
·         Show a list of un-assigned Readers using pseudo
data.
·         Allow the user to drag items from the list into
the map. Once on the map, Readers can be dragged again on the map to change
their location.
·         Allow removing of items from the map by dragging
them back to the list.
3.       Using Layers to group all entities of the same
type
·         Each type of entities is shown on its own Layer.
The background is also placed on its own Layer.
·         Each layer can be faded-in and out independently
of other Layers using a slider.
·         Each layer can be turned on and off. This is
implemented by showing a list of all Layers, each of them can be switched on or
off by a checkbox. 

4.       Showmobile entities on the map
·         Implementing a call to the server to refresh all
dynamic elements using pseudo data. This call should be repeated automatically
every 2 seconds.
I
 have gone through some websites and got some wage idea regarding batik 
toolkit,But Don't know which direction to move with or what APIs to use 
etc.

Please suggest me some guidelines to proceed.

Thanks,
Barkha

[Non-text portions of this message have been removed]



------------------------------------

-----
To unsubscribe send a message to: svg-developers-unsubscribe< at >yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
    Individual Email | Traditional

<*> To change settings online go to:
    http://groups.yahoo.com/group/svg-developers/join
    (Yahoo! ID required)

<*> To change settings via email:
    svg-developers-digest< at >yahoogroups.com 
    svg-developers-fullfeatured< at >yahoogroups.com

<*> To unsubscribe from this group, send an email to:
    svg-developers-unsubscribe< at >yahoogroups.com

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/

Reflection in a puddle

Arif Burhan — 2012-05-10T08:02:53

To see an example of a reflection in a puddle view:

     http://irony-maiden.com/SVG/Puddle.htm

( Best viewed in Mozilla Firefox or Seamonkey )

regards,

Arif Burhan


[Non-text portions of this message have been removed]



------------------------------------

-----
To unsubscribe send a message to: svg-developers-unsubscribe< at >yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
    Individual Email | Traditional

<*> To change settings online go to:
    http://groups.yahoo.com/group/svg-developers/join
    (Yahoo! ID required)

<*> To change settings via email:
    svg-developers-digest< at >yahoogroups.com 
    svg-developers-fullfeatured< at >yahoogroups.com

<*> To unsubscribe from this group, send an email to:
    svg-developers-unsubscribe< at >yahoogroups.com

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/

Given start point, control point(s) vector & length, how to solve end point for quadratic and cubic Bézier curves?

Jonathan Chetwynd — 2012-05-05T08:03:17

Given start point, control point(s) vector & length, how to solve end  
point for quadratic and cubic Bézier curves?

Jonathan Chetwynd
jay< at >peepo.com

------------------------------------

-----
To unsubscribe send a message to: svg-developers-unsubscribe< at >yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
    Individual Email | Traditional

<*> To change settings online go to:
    http://groups.yahoo.com/group/svg-developers/join
    (Yahoo! ID required)

<*> To change settings via email:
    svg-developers-digest< at >yahoogroups.com 
    svg-developers-fullfeatured< at >yahoogroups.com

<*> To unsubscribe from this group, send an email to:
    svg-developers-unsubscribe< at >yahoogroups.com

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/

how to solve end point for Bézier given start point, control point & length?

Jonathan Chetwynd — 2012-05-04T07:58:17

how to solve end point for Bézier given start point, control point &  
length?

kind regards

Jonathan Chetwynd
jay< at >peepo.com





------------------------------------

-----
To unsubscribe send a message to: svg-developers-unsubscribe< at >yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
    Individual Email | Traditional

<*> To change settings online go to:
    http://groups.yahoo.com/group/svg-developers/join
    (Yahoo! ID required)

<*> To change settings via email:
    svg-developers-digest< at >yahoogroups.com 
    svg-developers-fullfeatured< at >yahoogroups.com

<*> To unsubscribe from this group, send an email to:
    svg-developers-unsubscribe< at >yahoogroups.com

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/

Deadline approaching for submission of abstracts for SVG Open/The Open Web 2012

David Dailey — 2012-05-02T01:49:18

Just a reminder to all you good folks that May 7th is the deadline for
submission of abstracts for this year's conference in Zurich in September:

 

http://www.svgopen.org/2012/dates.shtml 

 

This year's conference will be sponsored by Adobe, Google, Microsoft and
NVIdia and supported by the W3C and Khronos standards organizations.

 

It marks a transition from a conference focused on SVG to one that more
broadly addresses the full suite of open graphics technologies for the web.

 

(It is not too late to join our group of sponsors either!)

 

Cheers

David

 

 



[Non-text portions of this message have been removed]



------------------------------------

-----
To unsubscribe send a message to: svg-developers-unsubscribe< at >yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
    Individual Email | Traditional

<*> To change settings online go to:
    http://groups.yahoo.com/group/svg-developers/join
    (Yahoo! ID required)

<*> To change settings via email:
    svg-developers-digest< at >yahoogroups.com 
    svg-developers-fullfeatured< at >yahoogroups.com

<*> To unsubscribe from this group, send an email to:
    svg-developers-unsubscribe< at >yahoogroups.com

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/

Font encoding problems on Windows

SteveM — 2012-04-30T21:29:52

I doubt there is any way for this to work, but I thought I'd ask anyway. Our cross-platform app exports to svg. When we export text using certain music symbol fonts, we write the correct unicode characters for those fonts as they appear in the font on a Mac. The problem is that when the svg is viewed on Windows in IE, it renders the wrong glyphs.

We actually write the fonts and their glyph data at the top of the svg, but apps like IE and FireFox aren't smart enough to use that data. So it's rendering via the installed font.

I can provide more detailed info if somebody might know what's going on or if there's a way to fix this. I looked at the "switch" command, but I didn't see a way to have it check the current OS. That would be ideal; do it one way on Mac and a hacky way on Windows (yeah, real new concept there).



------------------------------------

-----
To unsubscribe send a message to: svg-developers-unsubscribe< at >yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
    Individual Email | Traditional

<*> To change settings online go to:
    http://groups.yahoo.com/group/svg-developers/join
    (Yahoo! ID required)

<*> To change settings via email:
    svg-developers-digest< at >yahoogroups.com 
    svg-developers-fullfeatured< at >yahoogroups.com

<*> To unsubscribe from this group, send an email to:
    svg-developers-unsubscribe< at >yahoogroups.com

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/

Adjusting the colours in an svg doc

Andrew Shellshear — 2012-04-17T12:18:24

Hello developers,

I've written a thing for my game that other people might find useful. It
allows you to change the colours in an svg document.

It does so by parsing through the tree under the element you specify, and
changing all fill, stroke, and stop-color elements it finds.
It also follows any references to gradients or patterns, and clones the
nodes doing the reference.

http://otherleg.com/svg/EgColorTweaker.svg


The actual work is being done by

http://otherleg.com/svg/colorTweaker.js

with the function setLightLevel:

// Search through the specified node and its children, and multiply fill
and/or stroke by level.
// svgNode - the root node from which to change the levels
// level   - light level to set, consisting of {r:red_level, g:green_level,
b:blue_level}
//           Each level should be a number between 0 and 2, where 0 is all
black, 2 is all white, and 1 is normal.
// groupId - Set this when you're setting multiple different light levels
in the same doc.
//           Each separate lit group should be given a different groupId.
This is so that
//           gradients and patterns get cloned properly.
function setLightLevel(svgNode, level, groupId)


If you just wish to change the brightness (as I did originally) it's
actually easier to change to opacity of the group instead, and just put a
black element (or white if you want to increase the brightness) with the
same outline behind it. The third area in the example shows this. Note that
if you're changing a lot of elements to different brightnesses (as I am
with my tile-based game), it's creating an off-screen buffer for each one,
I think. Depending on what you're doing, it's probably slower than parsing
through the tree changing the colours.

Cheers,

Andrew.


[Non-text portions of this message have been removed]



------------------------------------

-----
To unsubscribe send a message to: svg-developers-unsubscribe< at >yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
    Individual Email | Traditional

<*> To change settings online go to:
    http://groups.yahoo.com/group/svg-developers/join
    (Yahoo! ID required)

<*> To change settings via email:
    svg-developers-digest< at >yahoogroups.com 
    svg-developers-fullfeatured< at >yahoogroups.com

<*> To unsubscribe from this group, send an email to:
    svg-developers-unsubscribe< at >yahoogroups.com

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/

viewbox problem in IE

Alireza — 2012-04-14T19:53:16

Hello

I have the following function triggered by mousewheel event handler for zooming.


function ZoombyWheel(SVG_Name, ZoomChangePercent, ZoomCenterX, ZoomCenterY) {
    if (window.addEventListener) {//Not IE
        document.getElementById(SVG_Name).viewBox.baseVal.x = document.getElementById(SVG_Name).viewBox.baseVal.x * (1 - ZoomChangePercent * ZoomCenterX);
        document.getElementById(SVG_Name).viewBox.baseVal.y = document.getElementById(SVG_Name).viewBox.baseVal.y * (1 - ZoomChangePercent * ZoomCenterY);
        document.getElementById(SVG_Name).viewBox.baseVal.width = document.getElementById(SVG_Name).viewBox.baseVal.width * (1 - ZoomChangePercent);
        document.getElementById(SVG_Name).viewBox.baseVal.height = document.getElementById(SVG_Name).viewBox.baseVal.height * (1 - ZoomChangePercent);
    }
    else {
        var S = getAttr(document.getElementById(SVG_Name), 'viewBox');

        var Arr = S.split(" ");

        Arr[0] = Arr[0] * (1 - ZoomChangePercent * ZoomCenterX);
        Arr[1] = Arr[1] * (1 - ZoomChangePercent * ZoomCenterX);
        Arr[2] = Arr[2] * (1 - ZoomChangePercent);
        Arr[3] = Arr[3] * (1 - ZoomChangePercent);

        S = Arr[0] + " " + Arr[1] + " " + Arr[2] + " " + Arr[3];
        //document.getElementById(SVG_Name).attributes.removeNamedItem('viewBox')
        document.getElementById(SVG_Name).setAttributeNS(null,'viewBox', S);
        /*
        for (var i = 0; i < document.getElementById(SVG_Name).attributes.length; i++)
            if (document.getElementById(SVG_Name).attributes[i].nodeName === 'viewBox')
                document.getElementById(SVG_Name).attributes[i].nodeValue = S;
        */
    } 
}

commented parts show lots of try and errors that I've done for solving my problem. First part that is for non IE browsers has worked well in chrome.

next part (else block)which is for IE is assumed to easily change viewbox, but in real world it sucks.

If I use setAttribute, attribute is set but no change in real graphics. The same result happens when I use attributes collection. setAttributeNS completely fails with error :Object doesn't support property or method 'setAttributeNS'.

Could you pleas help?




------------------------------------

-----
To unsubscribe send a message to: svg-developers-unsubscribe< at >yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
    Individual Email | Traditional

<*> To change settings online go to:
    http://groups.yahoo.com/group/svg-developers/join
    (Yahoo! ID required)

<*> To change settings via email:
    svg-developers-digest< at >yahoogroups.com 
    svg-developers-fullfeatured< at >yahoogroups.com

<*> To unsubscribe from this group, send an email to:
    svg-developers-unsubscribe< at >yahoogroups.com

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/

Batching converting raster images to SVG using inkscape: avoiding the embed or link prompt

Pranav Lal — 2012-04-12T17:06:30

Hi all,

I am batch converting a bunch of raster images to SVG using inkscape. I get
a dialog for some images asking me if I want to link or imbed the images
since imbedding will make the SVG larger. I want a single svg file
irrespective of its size. Is there a way to tell inkscape this and stop it
from prompting me?

Pranav 



------------------------------------

-----
To unsubscribe send a message to: svg-developers-unsubscribe< at >yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
    Individual Email | Traditional

<*> To change settings online go to:
    http://groups.yahoo.com/group/svg-developers/join
    (Yahoo! ID required)

<*> To change settings via email:
    svg-developers-digest< at >yahoogroups.com 
    svg-developers-fullfeatured< at >yahoogroups.com

<*> To unsubscribe from this group, send an email to:
    svg-developers-unsubscribe< at >yahoogroups.com

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/

Trying to work around text's lack of a background

Benjamin Podszun — 2012-04-05T15:05:42

Hi.

I recently started discovering svg, mostly by falling in love with d3.js.
I know that <text> has no background. It seems that question comes up on 
the net every once in a while and the consensus seems to be this:
'Draw a <rect> and put the <text> on top'.

That's - scary, because math is hard and I'd rather go shopping. On a more
serious note: I have a text that is highly dynamic. Probably it's between 
5 to 15 characters most of the time. Maybe. I layer that text on top of a
graph (think workflow, states and arrows between them). Sometimes the text
needs to be drawn in a place where a line/arrow is already.

Bottom line: I want the text to be readable and therefor try to create a
uniform background.

Calculating the rect size would be possible but it seems that I'd need a 
lot of roundtrips (creating the text, grabbing the bounding box,
creating/resizing the rect) where I so far had just simple mapping/data
binding. I'd love to avoid that.

Messing a lot with nested elements and filters I was happy to get a
workaround that works fine in FF and Chrome, but fails in - you guessed it 
- IE9. FF and Chrome show me red text on yellow background. IE9 ignores 
the background.

This is what I have, simplified of course:

<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="400">
   <defs>
     <filter id="flood">
       <feFlood
         flood-color="yellow"
         flood-opacity="0.75"
         result="flooded"/>
       <feMerge>
         <feMergeNode in="flooded"/>
         <feMergeNode in="SourceGraphic"/>
       </feMerge>
     </filter>
   </defs>
   <g class="workflowGroup">
     <g id="SomeNode" transform="translate(345, 199.5)">
       <rect
         class="station" fill="rgb(255,255,255)"
 x="-37" y="-26.5" rx="10" ry="10"
 width="74" height="53"/>
       <text y="9" fill="black"
         text-anchor="middle"
         dominant-baseline="mathematical"
         font-size="12">NodeName</text>
       <text y="35.5"
         filter="url(#flood)"
 fill="red"
         text-anchor="middle"
         dominant-baseline="mathematical"
         font-size="12">ThisIsMyProblem</text>
     </g>
   </g>
</svg>

By now I'm nearly ready to give up, but maybe someone on this list can 
help me with the following?

- Is this a valid use of a filter? Are FF and Chrome _correct_ in doing 
what I want or did I stumble upon a happy glitch?
- Is there anything obviously hindering IE to do what I want, period?
- Any other creative ways to get a new background without lots of 
calculations (lots = per node) in javascript?

Thanks a lot for any pointer,
Ben


------------------------------------

-----
To unsubscribe send a message to: svg-developers-unsubscribe< at >yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
    Individual Email | Traditional

<*> To change settings online go to:
    http://groups.yahoo.com/group/svg-developers/join
    (Yahoo! ID required)

<*> To change settings via email:
    svg-developers-digest< at >yahoogroups.com 
    svg-developers-fullfeatured< at >yahoogroups.com

<*> To unsubscribe from this group, send an email to:
    svg-developers-unsubscribe< at >yahoogroups.com

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/

showing full svg content whithout calculating extents

Alireza — 2012-04-05T08:19:19

Hello

I need help for finding extents of an svg drawing. Please take a look at this example:

<svg id="SVG1" width="5cm" height="5cm" viewBox="0 -100 200 200">
<g id="G2">
<line x1="0" y1="0" x2="100" y2="100" stroke="blue"/>
<line x1="0" y1="0" x2="0" y2="100" stroke="blue"/>
<line x1="0" y1="0" x2="100" y2="0" stroke="blue"/>
<line x1="0" y1="0" x2="100" y2="-100" stroke="blue"/>
</g>
</svg>

For this sample it was easy to understand that viewBox="0 -100 200 200" will fit the whole drawing. But in my real world application this will not be so easy to calculate this. And without this viewbox or with incorrect calculations, at least a part of drawing will not be shown which is not desirable.

I want to show the whole drawing in svg without getting involved in calculating the extents. Something like zoom extents in aoutocad. could you please help?

Thanks



------------------------------------

-----
To unsubscribe send a message to: svg-developers-unsubscribe< at >yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
    Individual Email | Traditional

<*> To change settings online go to:
    http://groups.yahoo.com/group/svg-developers/join
    (Yahoo! ID required)

<*> To change settings via email:
    svg-developers-digest< at >yahoogroups.com 
    svg-developers-fullfeatured< at >yahoogroups.com

<*> To unsubscribe from this group, send an email to:
    svg-developers-unsubscribe< at >yahoogroups.com

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/

Reverse the Javascript?

jamesd — 2012-04-05T23:43:11

I have a scroll Down button for a SVG database display. It works great, but I would also like to have an Up button. Anyway to reverse this process? I could not find any info via Google.

<script type="text/javascript">
function jumpScroll() {

window.scrollBy(0, window.innerHeight);

}
</script>

Thanks;

James



------------------------------------

-----
To unsubscribe send a message to: svg-developers-unsubscribe< at >yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
    Individual Email | Traditional

<*> To change settings online go to:
    http://groups.yahoo.com/group/svg-developers/join
    (Yahoo! ID required)

<*> To change settings via email:
    svg-developers-digest< at >yahoogroups.com 
    svg-developers-fullfeatured< at >yahoogroups.com

<*> To unsubscribe from this group, send an email to:
    svg-developers-unsubscribe< at >yahoogroups.com

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/

diagonal lines in pattern elements

David Dailey — 2012-04-05T01:16:27

http://cs.sru.edu/~ddailey/svg/V12.svg

 

In the bottom right illustration on this page, note how the diagonal lines
(created through varying both size and viewBox attributes on a pattern tag)
have small discontinuities. (in all modern browsers)

 

Does anyone see an obvious way around that?

 

Cheers

David

P.S. For a fun example with patterns see
http://srufaculty.sru.edu/david.dailey/svg/recent/sliderzoom2.svg and drag
the slider. Works the same in FF, Opera and IE (not so well in Chrome or
Safari though)



[Non-text portions of this message have been removed]



------------------------------------

-----
To unsubscribe send a message to: svg-developers-unsubscribe< at >yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/svg-developers/

<*> Your email settings:
    Individual Email | Traditional

<*> To change settings online go to:
    http://groups.yahoo.com/group/svg-developers/join
    (Yahoo! ID required)

<*> To change settings via email:
    svg-developers-digest< at >yahoogroups.com 
    svg-developers-fullfeatured< at >yahoogroups.com

<*> To unsubscribe from this group, send an email to:
    svg-developers-unsubscribe< at >yahoogroups.com

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/

How do I setup and use a SVG glyph library?

2012-04-04T07:00:48

Hi All,

I'm presently assembling many glyphs across a set of SVG files. The way I'm formatting the SVG files is just like is shown here : http://opentype.info/blog/2010/04/13/the-ipad-and-svg-fonts-in-mobile-safari

The goal after defining the many glyphs as DEFS in the SVG files is to be able to load them and create an SVG document using the pre-defined glyphs. It looks like SVG has the means to do this with the USE element but I'm really not sure this is true. The files I'm defining are like libraries of glyphs which would be external to the main SVG document where I would expect to use them. After looking into this a bit I hear a lot of confusion so below are my new questions!

Is it possible to use the USE element to reference glyphs in external files? Is the SYMBOL element a better way to go? Then there is also the new font-face feature via CSS3, is that how my goal would finally be achieved (except my glyphs are in the E000 to F8FF unicode range, so they can not be typed easily)? Also, what is the best way to load a SVG glyph external library file so it can be referenced in order to build the main SVG document (does it need a separate DOM)? All this is in the SVG spec but do Webkit based browsers support all this?

Below are a few relevant links but it does seem like there is a lot of confusion in this area. Some of the links seem to have a solution (like the first one using the superb D3.js framework) while others are more confused. What is the truth about this? I think that being able to re-use glyphs is a basic feature we should be able to count on, right? Surely, it has been ages since Flash introduced the USE (rubberstamp) feature, it is 2012 now, what is the present state-of-the-art on this essential feature?

http://bl.ocks.org/1503463
http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Document_Structure#The_use_Element
http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/
http://www.inkscapeforum.com/viewtopic.php?f=5&t=6961
http://www.svgdiscovery.com/SymbolLibrary/Help/svgSymbol.htm