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]

On Thu, 05 Apr 2012 03:16:27 +0200, David Dailey
<ddailey@...> wrote:

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

Your can modify your pattern tiles, e.g like this:

<pattern id="NL1" patternUnits="userSpaceOnUse" width="20" height="30"
viewBox="0 0 25 25" preserveAspectRatio="none">
    <line x1="-5" y1="-5" x2="30" y2="30" stroke="black" stroke-width="2" />
    <line x1="-5" y1="-5" x2="30" y2="30" stroke="black" stroke-width="2"
transform="translate(25,0)"/>
    <line x1="-5" y1="-5" x2="30" y2="30" stroke="black" stroke-width="2"
transform="translate(-25,0)"/>
</pattern>

The added lines+transforms just make sure that the overflow (from the
neighboring tiles) that should go on each side ends up where it's supposed
to.

--
Erik Dahlstrom, Core Technology Developer, Opera Software
Co-Chair, W3C SVG Working Group
Personal blog: http://my.opera.com/macdev_ed

Yes, thanks Erik, that seems to do it (except for IE9 where the line-breaks
still persist).



I cleaned up the code a bit (using <use>) and updated the example at
http://cs.sru.edu/~ddailey/svg/V12.svg



The example that is second from the left in the bottom row conveys something
I’ve been thinking about for some time: would there be a canonical set of
pattern primitives which when combined could give a tactile substitution for
color for those who can’t see the colors? It is related to what I call
“geometric accessibility.” In a textual language like HTML, the semantics is
text, while in a visual language like SVG, the semantics is graphical (something
to think about when we decide which attributes should be style-able and
use-able).



Might the use of Braille characters for the glyphs in the figure at bottom left
provide better semantic labeling of the regions of overlap? Well it seems like
the dot frequencies of the Braille together with the pattern harmonics would set
up interference that would just be “noisy” in the tactile realm, hence the
idea that something like the superimposition of patterns (in the one to its
right) might remedy.



So, in some basic psychophysical sense (a la Weber, Helmhotz, Fechner and S. S.
Stevens) are there a set of maximally distinguishable simple glyphs, which could
be used in patterns to show intersections of overlapping regions in a way which
maximizes similarity between regions and subregions, while maximizing
differences between the 2^n subregions of a given Venn diagram. Such would, I
suppose, be old hat to those familiar with Ian McHarg’s work
(http://en.wikipedia.org/wiki/Ian_McHarg#Design_with_Nature ) but to an
non-cartographer like me, the questions are, at once, fundamental and
intriguing.  And I rather doubt that the problem has been “solved” in the
sense of solving the relevant psychophysical differential equations.



Cheers

David

From: svg-developers@yahoogroups.com [mailto:svg-developers@yahoogroups.com] On
Behalf Of Erik Dahlstrom
Sent: Thursday, April 05, 2012 5:12 AM
To: svg-developers@yahoogroups.com
Subject: Re: [svg-developers] diagonal lines in pattern elements





On Thu, 05 Apr 2012 03:16:27 +0200, David Dailey
<ddailey@... <mailto:ddailey%40zoominternet.net> > wrote:

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

Your can modify your pattern tiles, e.g like this:

<pattern id="NL1" patternUnits="userSpaceOnUse" width="20" height="30"
viewBox="0 0 25 25" preserveAspectRatio="none">
<line x1="-5" y1="-5" x2="30" y2="30" stroke="black" stroke-width="2" />
<line x1="-5" y1="-5" x2="30" y2="30" stroke="black" stroke-width="2"
transform="translate(25,0)"/>
<line x1="-5" y1="-5" x2="30" y2="30" stroke="black" stroke-width="2"
transform="translate(-25,0)"/>
</pattern>

The added lines+transforms just make sure that the overflow (from the
neighboring tiles) that should go on each side ends up where it's supposed
to.

--
Erik Dahlstrom, Core Technology Developer, Opera Software
Co-Chair, W3C SVG Working Group
Personal blog: http://my.opera.com/macdev_ed





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

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

I don't have a solution but an idea of that might have happend. Look att
the image:
http://www.mjtrafik.se/temp/temp/svg_pattern.png

I have drawn some thin lines through the "holes" and it seems that the
lines inside the circles extends outside the circles, but negative.
Instead of drawing a line, a line is "removed". Inside the circle is
"PATTERN", outside the circle is "NOT PATTERN" if you understand what I
mean.

Regards,
Daniel


David Dailey skrev 2012-04-05 03:16:
> 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@yahoogroups.com
> -or-
> visit http://groups.yahoo.com/group/svg-developers and click "edit my
membership"
> ----Yahoo! Groups Links
>
>
>
>
>
> -----
> No virus found in this message.
> Checked by AVG - www.avg.com
> Version: 2012.0.1913 / Virus Database: 2409/4915 - Release Date: 04/04/12

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

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

I can't say if that's the issue or not, but that's a very astute
observation.

On Wed, Apr 4, 2012 at 10:09 PM, Daniel Bergqvist <daniel.b@...>wrote:

> **
>
>
> I don't have a solution but an idea of that might have happend. Look att
> the image:
> http://www.mjtrafik.se/temp/temp/svg_pattern.png
>
> I have drawn some thin lines through the "holes" and it seems that the
> lines inside the circles extends outside the circles, but negative.
> Instead of drawing a line, a line is "removed". Inside the circle is
> "PATTERN", outside the circle is "NOT PATTERN" if you understand what I
> mean.
>
> Regards,
> Daniel
>
> David Dailey skrev 2012-04-05 03:16:
>
> > 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@yahoogroups.com
> > -or-
> > visit http://groups.yahoo.com/group/svg-developers and click "edit my
> membership"
> > ----Yahoo! Groups Links
> >
> >
> >
> >
> >
> > -----
> > No virus found in this message.
> > Checked by AVG - www.avg.com
> > Version: 2012.0.1913 / Virus Database: 2409/4915 - Release Date: 04/04/12
>
>
>


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

Hi James,
you can use window.scrollTo(0,0).
https://developer.mozilla.org/en/Window.scrollBy
https://developer.mozilla.org/fr/DOM/window.scrollTo

Yannick

----- Mail original -----
De: "jamesd" <jcdeering1@...>
À: svg-developers@yahoogroups.com
Envoyé: Vendredi 6 Avril 2012 01:43:11
Objet: [svg-developers] Reverse the Javascript?






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

Hi,
if all your shapes are included in a g element, you can use the getBBox method
on this node to get the dimensions.
In your example :
document.getElementById('G2').getBBox()

Yannick

----- Mail original -----
De: "Alireza" <ahmadi_rad@...>
À: svg-developers@yahoogroups.com
Envoyé: Jeudi 5 Avril 2012 10:19:19
Objet: [svg-developers] showing full svg content whithout calculating extents






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

Hi Ben,
since the getBBox method returns a SVGRect object, it's only few lines of
javascript to create/update a rect element behind your text element, no math and
you can go shopping.

function setText(textElmt,str) {
    textElmt.textContent = str;
    var box = textElmt.getBBox();
    var rect = document.createElementNS('http://www.w3.org/2000/svg','rect');
    rect.setAttribute('class','yourCustomBackground');
    for (var n in box) { rect.setAttribute(n,box[n]); }
    textElmt.parentNode.insertBefore(rect,textElmt);
}

Yannick

----- Mail original -----
De: "Benjamin Podszun" <dar@...>
À: svg-developers@yahoogroups.com
Envoyé: Jeudi 5 Avril 2012 17:05:42
Objet: [svg-developers] Trying to work around text's lack of a background






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

Hi Chris,
All you can do is dealing with the HTML5 history API, but you can't really stop
the back button, and it's not advisable.
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
Yannick

----- Mail original -----
De: "Chris Peto" <svgdev@...>
À: svg-developers@yahoogroups.com
Envoyé: Mardi 3 Avril 2012 12:30:06
Objet: [svg-developers] Stopping back button in Safari






Hi,

Does anybody know how to, hopefully over js, stop the back button in Safari?

Thanks,

Chris

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

yannick.bochatay@... wrote: you can use window.scrollTo(0,0).

No you can't, not if you want the presentation to be scalable. The retina
display and HDTV resolutions effectively make javascript actions based on pixel
measurements obsolete.

That's the problem.

James

Really, the only way to simulate this in all browsers would be to have a
blank landing page that redirects you to the actual page. This way, when
they click back, the last page redirects them back to the current page. I
would consider this along the lines of spammy though and users wouldn't
appreciate it.

On Fri, Apr 6, 2012 at 7:43 AM, <yannick.bochatay@...> wrote:

> **
>
>
> Hi Chris,
> All you can do is dealing with the HTML5 history API, but you can't really
> stop the back button, and it's not advisable.
> https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
> Yannick
>
> ----- Mail original -----
> De: "Chris Peto" <svgdev@...>
> �: svg-developers@yahoogroups.com
> Envoy�: Mardi 3 Avril 2012 12:30:06
> Objet: [svg-developers] Stopping back button in Safari
>
>
> Hi,
>
> Does anybody know how to, hopefully over js, stop the back button in
> Safari?
>
> Thanks,
>
> Chris
>
> [Non-text portions of this message have been removed]
>
>
>


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

Thanks, I wished I could find a tag or attribute for this but this is also
useful.

Anyhow thanks
--- In svg-developers@yahoogroups.com, yannick.bochatay@... wrote:
>
> Hi,
> if all your shapes are included in a g element, you can use the getBBox method
on this node to get the dimensions.
> In your example :
> document.getElementById('G2').getBBox()
>
> Yannick
>
> ----- Mail original -----
> De: "Alireza" <ahmadi_rad@...>
> À: svg-developers@yahoogroups.com
> Envoyé: Jeudi 5 Avril 2012 10:19:19
> Objet: [svg-developers] showing full svg content whithout calculating extents
>
>
>
>
>
>
> 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
>

Hey Yannik.
Thanks for getting back to me. My issue is really not a math problem. I just
don't currently have a good way to grab that element.

My graph is generated from d3 and updated from knockout.js. My point is - so far
this is 'magic'. To do as you suggest I need to remove that and do it the manual
way. Since the rest of the app works with these bindings only this feels awkward
and out of place in my context.

There's no setText of any sort. Do I really need to add it? That (bounding box
on every update and changing / inserting the rect) is The Only Way (tm)?

Thanks again,
Ben
--
Sent from my Android phone with K-9 Mail. Please excuse my brevity.

yannick.bochatay@... wrote:



Hi Ben,
since the getBBox method returns a SVGRect object, it's only few lines of
javascript to create/update a rect element behind your text element, no math and
you can go shopping.

function setText(textElmt,str) {
textElmt.textContent = str;
var box = textElmt.getBBox();
var rect = document.createElementNS('http://www.w3.org/2000/svg','rect');
rect.setAttribute('class','yourCustomBackground');
for (var n in box) { rect.setAttribute(n,box[n]); }
textElmt.parentNode.insertBefore(rect,textElmt);
}

Yannick

----- Mail original -----
De: "Benjamin Podszun" <dar@...>
À: svg-developers@yahoogroups.com
Envoyé: Jeudi 5 Avril 2012 17:05:42
Objet: [svg-developers] Trying to work around text's lack of a background

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





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

No, I don’t believe there is any such tag or attribute to set the viewBox so
that it will hold all drawn contents of a drawing. I could see the value,
though, of what you’re saying: doing it declaratively instead of via script.
As it is, I believe you’d have to do as Yannick says: render all content
inside a <g> and, upon the load of the svg, measure the <g> with getBBox(). If
you’re using D3, then you have access to JavaScript (not all viewers do), so
it shouldn’t matter too much (the computational efficiency of getBBox() should
work pretty efficiently as a function of the number of drawn objects in the <g>,
though I suppose the complexity of the objects would affect this as well)



Good luck

David



From: svg-developers@yahoogroups.com [mailto:svg-developers@yahoogroups.com] On
Behalf Of Alireza
Sent: Friday, April 06, 2012 9:31 AM
To: svg-developers@yahoogroups.com
Subject: [svg-developers] Re: showing full svg content whithout calculating
extents





Thanks, I wished I could find a tag or attribute for this but this is also
useful.

Anyhow thanks
--- In svg-developers@yahoogroups.com <mailto:svg-developers%40yahoogroups.com>
, yannick.bochatay@... wrote:
>
> Hi,
> if all your shapes are included in a g element, you can use the getBBox method
on this node to get the dimensions.
> In your example :
> document.getElementById('G2').getBBox()
>
> Yannick
>
> ----- Mail original -----
> De: "Alireza" <ahmadi_rad@...>
> À: svg-developers@yahoogroups.com
<mailto:svg-developers%40yahoogroups.com>
> Envoyé: Jeudi 5 Avril 2012 10:19:19
> Objet: [svg-developers] showing full svg content whithout calculating extents
>
>
>
>
>
>
> 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
>





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

Tried window.scrollBy(0, -window.innerHeight);. didn't work, told to retry it,
it worked. SOB!

Also found this. This should clear things up for those interested in developing
scalable designs.

http://www.w3.org/TR/CSS21/syndata.html#length-units

James

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

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?

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]

I assume you are using IE9. Other minor bugs have been reported. Still early
days for this product.

Arif.

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

well, yes I'm using IE9.0 but the problem solved in an odd way. I think
this happened after I added JQuery to my project. now this block  starts
in IE:

      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);    }As far as I know addEventListener is for non IE
browsers.



Anyhow this problem is solved but instead after changing viewbox (zoom
in), the image goes outside of boundries of SVG element. My SVG Element
is included in a div element:
<div id="Graphics2DCanvas1_Div" onmousewheel="WheelEvent(event)"
onmousedown="MouseDown(event)" onmouseup="MouseUp(event)" style="border:
1px Solid #666666; width:300px; height: 300px;" ><svg
id="Graphics2DCanvas1_SVG" width="300px" height="300px" viewbox="-1000
-1000 3000 3000"><g id="Graphics2DCanvas1_SVG_TopMostGroup"
transform="scale(1,-1)"  ><line x1="50" y1="50" x2="100"" y2="100"
id="Graphics2DCanvas1-1"  SVG_ID="Graphics2DCanvas1"
Parent_ID="Graphics2DCanvas1"  class=""  style=""
externalresourcesrequired="False"  visibility="visible"  stroke= "Red"
stroke-dashoffset="" stroke-linecap="inherit"  stroke-linejoin="inherit"
stroke-width="1px"/><line x1="0" y1="0" x2="0"" y2="100"
id="Graphics2DCanvas1-2"  SVG_ID="Graphics2DCanvas1"
Parent_ID="Graphics2DCanvas1"  class=""  style=""
externalresourcesrequired="False"  visibility="visible"  stroke= "Red"
stroke-dashoffset="" stroke-linecap="inherit"  stroke-linejoin="inherit"
stroke-width="1px"/><line x1="0" y1="0" x2="100"" y2="0"
id="Graphics2DCanvas1-3"  SVG_ID="Graphics2DCanvas1"
Parent_ID="Graphics2DCanvas1"  class=""  style=""
externalresourcesrequired="False"  visibility="visible"  stroke= "Red"
stroke-dashoffset="" stroke-linecap="inherit"  stroke-linejoin="inherit"
stroke-width="1px"/><line x1="0" y1="0" x2="0"" y2="-100"
id="Graphics2DCanvas1-4"  SVG_ID="Graphics2DCanvas1"
Parent_ID="Graphics2DCanvas1"  class=""  style=""
externalresourcesrequired="False"  visibility="visible"  stroke= "Red"
stroke-dashoffset="" stroke-linecap="inherit"  stroke-linejoin="inherit"
stroke-width="1px"/></g></svg></div>
may you have any answer for this?




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

David,

the following link:

http://www.cadsofttools.com/en/products/abviewer.html

has a product called ABViewer, I have copied the first paragraph below:

ABViewer 8ABViewer is a high-quality, cost-efficient multi-functional design and
engineering document management application. ABViewer offers you a wide choice
of professional viewing and editing tools. Support of more than 30 both raster
and vector formats is provided, including AutoCAD DWG, DXF, DWF, Hewlett-Packard
HPGL, PLT, HGL, CGM, SVG, IGES/IGS, STEP/STP, STL, 3DS, TIFF, BMP, JPG, GIF
etc.Hope this is of some help.

Kind regards,

Arif Burhan


--- On Sun, 1/4/12, David Dailey <ddailey@...> wrote:

From: David Dailey <ddailey@...>
Subject: [svg-developers] A path from SVG to MS Word?
To: svg-developers@yahoogroups.com
Date: Sunday, 1 April, 2012, 23:31
















 









       A conference that I'm submitting a paper to allows either LaTex or MS Word

as formats. It has been at least 70 years since I used TeX, so Word is the

format I'm left with.



The problem: most of the illustrations I have are in SVG format and use

complex filters and the journal states a strong preference for vector

graphics. Does anyone know of an easy path from these files to some other

format.  I can view the files successfully in either Opera or IE/ASV, but

nothing else that I have handy. The version of Adobe Illustrator (CS2) that

I have doesn't open the files properly (though I haven't tried the version 5

that I have at the office). Inkscape doesn't properly display the files

either.



Does anyone know a path from fancy SVG (an example can be seen using Opera

at http://cs.sru.edu/~ddailey/svg/V1.svg ) to some vector format that can be

embedded in Word or even PDF?



Thanks in advance



David



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



























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

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

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@yahoogroups.com [mailto:svg-developers@yahoogroups.com] On
Behalf Of SteveM
Sent: Monday, April 30, 2012 2:30 PM
To: svg-developers@yahoogroups.com
Subject: [svg-developers] Font encoding problems on Windows



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



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

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]

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 retouching the geometry. This solution also avoids a "minor" rendering
glitch in IE9 (not due to the stroke width 6.5).

Best,
Domenico



--- In svg-developers@yahoogroups.com, Marty Sullivan <dark3251@...> wrote:
>
> I can't say if that's the issue or not, but that's a very astute
> observation.
>
> On Wed, Apr 4, 2012 at 10:09 PM, Daniel Bergqvist <daniel.b@...>wrote:
>
> > **
> >
> >
> > I don't have a solution but an idea of that might have happend. Look att
> > the image:
> > http://www.mjtrafik.se/temp/temp/svg_pattern.png
> >
> > I have drawn some thin lines through the "holes" and it seems that the
> > lines inside the circles extends outside the circles, but negative.
> > Instead of drawing a line, a line is "removed". Inside the circle is
> > "PATTERN", outside the circle is "NOT PATTERN" if you understand what I
> > mean.
> >
> > Regards,
> > Daniel
> >
> > David Dailey skrev 2012-04-05 03:16:
> >
> > > 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@yahoogroups.com
> > > -or-
> > > visit http://groups.yahoo.com/group/svg-developers and click "edit my
> > membership"
> > > ----Yahoo! Groups Links
> > >
> > >
> > >
> > >
> > >
> > > -----
> > > No virus found in this message.
> > > Checked by AVG - www.avg.com
> > > Version: 2012.0.1913 / Virus Database: 2409/4915 - Release Date: 04/04/12
> >
> >
> >
>
>
> [Non-text portions of this message have been removed]
>

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

kind regards

Jonathan Chetwynd
jay@...

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

Jonathan Chetwynd
jay@...