gmane.text.xml.svg.devel

Re: Manipulating SVG in HTML using JavaScript

2012-05-22T08:25:29


--- In svg-developers< at >yahoogroups.com, "Jason" <jtbarnabas< at >...> wrote:

What exactly do you mean by this? You can create, modify, delete and insert nodes using the standard DOM methods. I'm not sure what's a good English reference, maybe have a look here:

https://developer.mozilla.org/en/Gecko_DOM_Reference



If your goal is to save space, I'd suggest using more organized SVG. Good ideas would be to use a pattern for the background grid and avoid repeated style and transformation attributes, maybe like this (it's a modified version of your Moravia diagram):

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="540" width="540">
<style type="text/css"> 
  text {fill:black; font-size:16; font-weight:bold; text-anchor:end;} 
  line {stroke:#C0C0C0;} 
</style>
<defs>
  <rect id="marker" width="6" height="6"/>
  <pattern id="grid" width="45" height="45" patternUnits="userSpaceOnUse" viewBox="-22.5 -22.5 45 45">
    <lin

Re: Get first parameter of rotate function

2012-05-22T07:33:02

Hi,
you'd better use the transform property of the SVG DOM elements.
Here is a little function to get the angle properly : http://jsbin.com/usopay/edit#javascript,html
Yannick

----- Mail original -----
De: "svgdeveloper" <svgdeveloper< at >yahoo.com>
À: svg-developers< at >yahoogroups.com
Envoyé: Dimanche 20 Mai 2012 13:41:11
Objet: [svg-developers] Get first parameter of rotate function






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;

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://gr

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

Re: Filter inheritance

Brian Birtles — 2012-05-21T02:02:02

Hi Jan,

(2012/05/19 5:50), honyk wrote:

This is according to the spec. Specifically, this part:

"When applied to container elements such as ‘g’, the ‘filter’ property 
applies to the contents of the group as a whole. The group's children do 
not render to the screen directly; instead, the graphics commands 
necessary to render the children are stored temporarily."[1]

The filter property is not inherited so there's no need to set it to none.

You can think of it like this: at the point where the filter property 
appears, the element and all of its children stop drawing to the screen 
and instead draw to 'SourceGraphic'.

The filter can then use 'SourceGraphic' (or SourceAlpha) and apply its 
effects to the visual result of the element and all of its children at 
once. It doesn't apply to the children individually.

Hope that helps,

Brian

[1] http://www.w3.org/TR/SVG11/filters.html#Introduction


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

-----
To unsubscribe send a message to: svg-developers-unsubscr

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-dig

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.

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

Re: Fw: Reflection in a puddle

Erik Dahlstrom — 2012-05-16T08:23:31

On Sun, 13 May 2012 01:54:18 +0200, Arif Burhan <aburhan2000< at >yahoo.co.uk>  
wrote:


See e.g http://www.colorzilla.com/gradient-editor/ for something that will  
work better crossbrowser. Or better yet, just use svg gradients instead,  
and avoid all the css vendor prefix nonsense...

RE: Getting current time in svg file...

David Dailey — 2012-05-15T23:55:32

You've used document.write to try to insert SVG content. I think that will
only work in HTML. For SVG, you'll have to use DOM methods to do that.

 

 

There are a zillion SVG clocks out there, but here's the one I can find
easily:

 

http://srufaculty.sru.edu/david.dailey/svg/ballclock.svg 

 

You'll see how it retrieves the time and then sets the clock hands. One
could just as easily write the time as a string into a text Node.

 

Good luck

David

From: svg-developers< at >yahoogroups.com [mailto:svg-developers< at >yahoogroups.com]
On Behalf Of royhoja
Sent: Monday, May 14, 2012 11:46 AM
To: svg-developers< at >yahoogroups.com
Subject: [svg-developers] Getting current time in svg file...

 

  

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/D

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.co

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, g

Отв.: [svg-developers] how to solve end point for Bézier given start point, control point & length?

Andrew Matseevsky — 2012-05-13T21:06:15




________________________________
 От: Jonathan Chetwynd <j.chetwynd< at >btinternet.com>
Кому: svg-developers< at >yahoogroups.com 
Отправлено: пятница, 4 мая 2012 19:58
Тема: [svg-developers] how to solve end point for Bézier given start point, control point & length?
 

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

kind regards

Jonathan Chetwynd
There is no way to do it. A control point has two parameters- X and Y. Having only one (length) you cannot calculate two parameters. One additional is a must.
Regards, Andrew


jay< at >peepo.com


 

[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:

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

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://do

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/

Re: diagonal lines in pattern elements

domenico_strazzullo — 2012-05-02T15:29:16

As Erik suggested you need three lines if the line follows the diagonal. But if you want to use two lines, each must cross one adjacent pair of sides only (staying clear of the diagonal), using stroke-linecap="square" and no need for viewbox, like this:

<pattern id="LL1" patternUnits="userSpaceOnUse" width="30" height="30">
  <rect x="0" y="0" width="30" height="30" fill="#f5f" opacity=".2" /> 
  <g stroke="#f5f">
    <line x1="-15" x2="15" y2="30" stroke-width="6.5" stroke-linecap="square" id="LLL"/>
    <use xlink:href="#LLL" transform="translate(30,0)"/>
  </g>
</pattern>

Better yet, you can use one vertical line only with patternTransform and no need for stroke-linecap:

<pattern id="LL4" patternUnits="userSpaceOnUse" width="21" height="21" patternTransform="rotate(-45)">
  <rect width="30" height="30" fill="#f5f" opacity=".2"/>
  <line x1="15" x2="15" y2="30" stroke="#f5f" stroke-width="6.5" id="LLL"/>
</pattern>

The pattern's width and height of 21 make it the same size of the original without retou

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

RE: Font encoding problems on Windows

Smailus, Thomas O — 2012-04-30T23:46:18

This is part of a list of things that are 'in the standard' but not 'implemented by the viewer'.

It would be nice if viewers implemented all the standard's features, because if the item ended up in the standard, it was probably significant enough in terms of need and impact that an argument won out to keep it in the standard.

But the viewers try to address the 80% solution mostly.

Since Firefox is open source, on fix is to get together a team and implement the support for embedded fonts in that browser.
Another alternative is to do what lots of CAD programs frequently do to ensure rendering.. (if it makes sense in your use cases).. and have your app export the music symbols as 'artwork' (ie stroked text .. lines, circles, etc) rather than text.  Of course you loose the ability to edit at a symbol level, but by using groups and definitions of symbols you might be able to reuse some renderings or at least be able to walk the DOM symbol by symbol.

Thomas

From: svg-developers< at >yahoogroups.com [mailto:svg-dev

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