kbwood / svg Goto Github PK

View Code? Open in Web Editor NEW

169.0 23.0 65.0 509 KB

jQuery SVG plugin

Home Page: http://keith-wood.name/svg.html

CSS 0.10% JavaScript 99.90%

svg's People

Stargazers

Watchers

svg's Issues

removeClass( function(i, class){} ) issue

jquery.svgdom expects only string, but since jQuery 1.4 we can use function-argument
jquery.svgdom throw error 'has no method split'

Missing camelCase version of shape-rendering attribute

Could you please add a camelCase version of shape-rendering? When displaying a grid of SVG rectangles, the default value of shape-rendering causes unsightly anti-aliasing.

jQuery.browser is deprecated since 1.9

http://jquery.com/upgrade-guide/1.9/#jquery-browser-removed

There are a few instances of this in your fine plugin.

It shouldn't take much effort to fix things. I'll try and do a pull-request myself when a) I have time, and b) I figure out how to do a pull-request, since I'm a Github newb. :p

Incompatible with jQuery 1.8

Hi,

this is what I've found is incompatible so far:

https://github.com/kbwood/svg/blob/master/jquery.svgdom.js#L170 -- This csshook doesn't appear to work with e.g. width and height, it returns strings with units [e.g. "192px" instead of 192] which isn't compatible with the jQuery API
https://github.com/kbwood/svg/blob/master/jquery.svgdom.js#L237 -- This prefilter destroys compatibility after the Sizzle rewrite in 1.8. Various methods randomly breaks and continue to break after that
.siblings('.filter') seems to be behaving oddly as well, and not filtering anymore, but that could easily be because of one of the other prefilters not working correctly, haven't found the exact issue yet

Here's a jsfiddle for the first two issues: http://jsfiddle.net/peol/fAbe8/ -- uncomment delete $.expr.preFilter.CLASS; to see how it fails internally in sizzle engine

TypeScript compatible or node module

Hi,

I am using this component as Javascript component. I would like to have it like installable as mode module. Something like that is supported? Please help!

Strange line 818 in jquery.svg.js reads strange

Reading code trying to decide what SVG package to go with, I found a line in _makeNode() that made me cross-eyed:

if (value != null && value != null &&

Was that supposed to be something like

if (value != null && value != undefined &&

Inline SVG and Remote SVG load event listener differences

Hi,

Loading an SVG graphic by specifying it as a string (inline) allows me to bind an event listener to an SVG element. The below code works:

 $('#world').svg(); 

var svg = $('#world').svg('get'); 

svg.load('<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" sodipodi:docname="New document 7"><rect id="rect1" x="100" y="20" width="150" height="100" fill="red" stroke="black" stroke-width="3"/></svg>', {addTo: true, onLoad: function() { console.log("done...");}}); 

$('#rect1', svg.root()).click(function(e) {
    console.log("Event works!");
});

However, when i attempt to load the SVG graphic from a file (remote), using the same SVG string only in a file, the event no longer works?

$('#world').svg(); 

var svg = $('#world').svg('get'); 

svg.load('drawing.svg', {addTo: true, onLoad: function() { console.log("done...");}}); 

$('#rect1', svg.root()).click(function(e) {
    console.log("Event works!");
});

I am using jquery v 1.7.2, jquery-svg v1.4.5, jquery-svg-dom v1.4.5 and Firefox v13.0.1.

Any help will be greatly appreciated.

Cheers.

About jquery end() function

when I import jquery svg dom ,$.fn.end is not work

Not possible to load SVG file content into a div element correctly

Hi,

I'm trying to load the content of a SVG file into a div element. Although the content is loaded, the height of the SVG is always "null".
Here is the HTML code I'm using:

<html>
<head>
    <title>Load SVG files with JavaScript</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.js"></script>
    <script type="text/javascript" src="http://keith-wood.name/js/svg.js"></script>
    <script type="text/javascript" src="http://keith-wood.name/js/jquery.svg.js"></script>
    <script type="text/javascript" src="http://keith-wood.name/js/jquery.svganim.js"></script>
    <script type="text/javascript" src="http://keith-wood.name/js/jquery.svgdom.js"></script>
    <script type="text/javascript" src="http://keith-wood.name/js/jquery.svgfilter.js"></script>
    <script type="text/javascript" src="http://keith-wood.name/js/jquery.svggraph.js"></script>
    <script type="text/javascript" src="http://keith-wood.name/js/jquery.svgplot.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#svgfile').svg({loadURL: 'lion.svg'});
        });
    </script>

</head>
<body>
    <div id="svgfile"></div>
</body>
</html>

The file "lion.svg" is located in the same directory as the HTML file.
I've already tried it with different versions of jQuery. Without success.

The generated content looks like this:

<div id="svgfile" class="hasSVG">
  <svg version="1.1" width="1664" height="null">
    <g transform="translate(100,10)">...</g>
  </svg>
</div>

If I set a value of 500 for the height in the web inspector, my SVG graphic is displayed.
Here's the error message in Safari:
Error: Invalid value for <svg> attribute height="null"

container.clientHeightin "jquery.svg.js" line 104 is always zero.

if (container.clientHeight > 0) {
    svg.setAttribute('height', container.clientHeight);
}

Error while using jQuery selector with classname in Internet Explorer 11

Hello

I've trouble with using jQuery selectors with class names, e.g. $('.some-class',svg.root()) - they are throwing an error in Internet Explorer 11: Object doesn't support property or method 'getElementByClassName'
I'm using jQuery 2.1.3 (with jquery.svg.js and jquery.svgdom.js).
It works with jQuery 1.7.2 though.

Any suggestions?

addClass throws an error on jQuery 1.9.1

I know jQuery 1.9 is not supported yet but trying to use this library with it I'm getting this when trying to add a class to an element:

Uncaught TypeError: Cannot read property '0' of undefined jquery.svgdom.js:243

Thanks,
Panickos

Pie chart invisible if all but one datum are 0

graph.type('pie');
graph.addSeries('A', [0, 1], 'red', 'none');
graph.addSeries('B', [2, 3], 'green', 'none');

The code above should produce two pie charts, the first of which is entirely green (a green circle). In reality, the first pie chart is invisible. Guess the 100% case needs special handling.

Disable exception alerts

I'm working on a project where all exceptions are logged and none alerted. I want the exceptions in the callback to div.svg(...) to behave the same way as exceptions everywhere else.

In case others have this problem, there is an ugly workaround: put the body of the callback in a setTimeout:

div.svg( { onLoad: function(svg) {
    setTimeout( function() {
        ...
    }, 0 );
} } );

Are jquery.svg.pack.js and jquery.svg.compat-1.0.1.js in the old versions necessary ?

Hello @kbwood ,
I am the member of cdnjs project.
We want to host this library.
Should we also need jquery.svg.pack.js and jquery.svg.compat-1.0.1.js in the old versions?

cdnjs/cdnjs#9085

hasClass return incorrect values

Method hasClass use field className, which is some kind of object in case of svg element.

I'm using jquery 1.7.2.

Pie chart error if x-axis label not set

jquery.svggraph.js line 1461:

graph.xAxis._labels[i])

whereas lines 997, 1087, 1189, 1300:

(axis._labels ? axis._labels[i] : '' + i));

The difference between line 1461 and the other lines means the pie chart is the only one raising an exception when not explicitly initialized with x-axis labels. That can't be right.

But looking at line 1459:

if (graph.xAxis) {

Is there any way for xAxis to be null? Or is line 1461 correct as it is, but line 1459 is supposed to be:

if (graph.xAxis._labels) {

Invalid version test

$.fn.jquery >= '1.6'
(jquery.svganim.js, line 28)

does not work with jQuery 1.10 anymore ;-) Took me a while to get that.

SVG animation is incompatible with jQuery 1.10

This trivial sample does not work: http://jsfiddle.net/gZMFF/

But if you set jQuery version to 1.9.1 at the left pane, it works smoothly.

svg Y issues with 1 svg element per div SVG 1.5 JQuery 1.11

Hello all,

I have been having a really hard time dealing with this issue that just keeps coming at me from different sides.

The task: Create a web application where I can use JQuery SVG with other parts of JQuery like JQuery UI, for example draggable. I have been pretty successful so far, except with this issue.

It all started out with this http://stackoverflow.com/questions/27010266/jquerysvg-elements-get-clipped-at-a-certain-point-how-to-fix-this/27031302#27031302

Where I would form my SVG elements, and for some reason they would get cut off at a certain size. This was believed to be due to the viewport not being big enough to fit the products.

I am creating an application that scales to the full size of the browser viewport, so this is a big issue.

As you can see in the post I answered my question with finding out I can change the width and height (width was set to 3000, and height was not set) with svg.configure, and it ended up seeming to fix my issue...

That was until I went down to a lower value instead of 12.

Attached is the scene at scale = 1, and you can see from my debugger that the rect is in the wrong spot, but why is it?

http://imagizer.imageshack.us/a/img633/2685/7UYA8e.png (try maxing the zoom of your browser to view better)

Next in this image I used from scale 1-20 to show the changes that are occurring to the scene based on just the scale changing.

I noticed that this is all due to the height of configuring, and when I turn it off, everything is in place as it should be.

I noticed that without configuring the items would start to cut off at about 13, and with configure on it would start to fit in place at about 15-20.

The next part of the image is showing configure off and how it gets cut off from 15-48.

So I decided to try and make it so that if my scale was above 11 then configure, else don't.

The problem with this is that I am trying to move each rectangle as it's own element. With configure off the Width is 3000 thus I grab any number of random objects from my scene, and this isn't good at all.

Keeping configure on allows me to grab the items pretty well, but at lower scale it screws me up.

I also noticed(because I thought this was the issue at first) that when I was at 12 some of the rects weren't fully sized, and that if I added +3 or so to my configure height it would fill in the remaining amount... This might be due to be having a 0.03*scale border around my rectangles, so I will have to check if that's it, or if I need more than that for my viewport to be full.

Also, if configure is off and the scene is bigger than the screen then objects will also be cut off, width wise as well, it's very weird. Configure on fixes all of this.

So what exactly is going on? Is this a bug or am I doing something wrong? I have been working with Jquery for a few months now, and just recently got into web dev in general, so I'm not sure about everything with the web, and this SVG.

I would appreciate any help as this has been giving me issues from the start.

Raphael.js was what I was using before this, and it was really simple and I had no issues at all, so I'm curious what's going on with this....?

Thanks all!

My code:

         var scale = ....
          for(var i = 0; i < total; i++)
          {
           var face = document.createElement("div");

            face.id = 'face'+i;       


            document.getElementById('plan').appendChild(face);

          $('#face'+i).svg();

            var faceE = $('#face'+i).svg('get'); 


             //   faceE.configure({width: w*scale, height: h*scale}, true);   

            faceE.rect(0,0,w*scale,
                       h*scale,{fill:'black', stroke: 
                       'red', strokeWidth: 0.3*scale});

        $( '#face'+i ).draggable({ snap: true});

             $('#face'+i).css({position:"absolute", left: x*scale, top:y*scale, width: w*scale, height:h*scale}); 

    }

@kbwood help please when you can thank you!!!

EDIT:

I noticed when going through my console something weird is going on here.

Now when I scroll over the div I see the rectangle is supposed to be in the "correct" spot, as shown above...

HOWEVER when I scroll on svg or rect it shows the current position of the rects.

I don't know where it's causing this issue to jump down, but I noticed that if I changed my y in my rect to -5.0016 (tried to take about half of 11 which is the height) I noticed that it lined up about perfectly.

So I'm curious why (now at scale 4) that this occuring? Why is it also occuring only on certain scales and once I'm at a large enough scale nothing is changed? Maybe I should be a certain # higher, and that as I scale up that number becomes less and less.

either way messed up, please assist!!!!

EDIT 2: Addition to my first edit. It is actually even weirder than what I first thought. The div will show the place it should be in, the svg shows where it is now, and the rect does some weird stuff when I scroll.

If I scroll down, then the shadow of the SVG rectangles move down, but everything stays in it's place.

Here are the pics:
http://imageshack.com/a/img905/8505/u0gI9U.png
http://imageshack.com/a/img538/7152/gV5jd9.png

EDIT 3: This is NOT a JQuery SVG issue, but seems to be an SVG bug of some sort, since Raphael.js does the same thing.

removeClasss uncaught typeerror

I use twgantt* which uses your library.

I am getting the error:
Uncaught TypeError: Cannot use 'in' operator to search for 'marginTop' in undefined

any ideas?

http://roberto.open-lab.com/2012/08/24/jquery-gantt-editor/

Gap in Horizontal lines

I dont know if this Project has been discontinued but I discovered a gap between the selected div and the svg tag on Horizontal lines as you can see in this fiddle http://jsfiddle.net/xgc12oew/5/

Its just on horizontal lines. Vertical or diagonal lines are not affected by this gap

animate Issue with prefixes for relative values.

I've been trying to use relative values for the animate function and it doesn't work at all. It just uses the values I give without adding or subtracting from the objects set value first.

$("#sys_" + system).animate({svgWidth: '+=20', svgHeight: '+=20'},500);

Sets the rect to a width and height of 20 not its current size + 20;

NOTE: I am trying to animate a SVG files I'm loading by svg.load('region_name.svg') The SVG files has id's for the elements.

Calling the animation like this $('#rect1').animate({svgWidth: '+=20', svgHeight: '+=20'},500);

kbwood / svg Goto Github PK

svg's People

Stargazers

Watchers

Forkers

svg's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs