Jump to content

Search the Community

Showing results for tags 'svg'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 20 results

  1. Could you please help me to find the answer, how the svg file should look like? <svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg"> <symbol id="myDot" viewBox="0 0 6 6" overflow="visible" transform="matrix(2 0 0 1 -6 5)"> <circle cx="1" cy="2" r="3"/> </symbol> <use href="#myDot" x="0" y="0" style="opacity:0.8" /> </svg> it looks differently in firefox and chrome. I disabled clipping by setting 'overflow="visible"'. In one case the transformation matrix is applied to she shape, and in the other one it is not. I can not find in specs which one is correct. Maybe someone knows?
  2. I've seen this (and similar) code used to apply an SVG filter to an image. How do I use this code to apply an SVG filter to a canvas? The canvas' content may change often. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="darkGreen"> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0.5 0 0 0 0 0 0 0 0 0 0 0 0 1" /> </filter> </defs> <image xlink:href="(url to image)" width="" height="" filter="url(#darkGreen)" /> </svg> Thank you
  3. I've been experimenting with various models for edge detection in an image. Everything I've tried reduces the image to grayscale. How do I perform edge detection with an SVG Sharpen Filter and preserve the image's underlying color? Here's a sample of the effect I'm looking for: Thank you very much!
  4. I am not able to understand how to enter any other element under SVG. suppose if you have to put your form under the SVG CIRCLE then how you will do it. Or suggest any other idea how i can nest my form's input text field under SVG. I also want to know weather i can align any form's input field like we can align texts. please answere my questions.
  5. Why does my polyline tag in SVG not accept style set inside defs tag but does in normal CSS? Here is my code: <html> <body> <style> .trapezoid2 { fill:beige;stroke:forestgreen;stroke-width:2; } </style> <center> <!-- I routinely use the center tag for older browsers. --> <svg height="400" width="800" style="border:5px double blue;background-color:tan;margin:0 auto;" > <defs> <polygon id="trapezoid1" style="fill:tan;stroke:blue;stroke-width:4;" /> </defs> <use xlink:href="#trapezoid1" points="100,200 150,100 350,100 400,200" /> <polygon id=".trapezoid2" points="400,300 450,200 650,200 700,300" style="fill:beige;stroke:forestgreen;stroke-width:2;" /> </svg> </center> </body> </html> The second trapezoid shows up but not the first. Thanks, PHPremote aka Patrick w3forum_polyline_defJune3.html
  6. Hello! Is there any way I can add a specific class to svg tag? I try to do that: .svgclass{ stroke: lightblue; stroke-width: 2px; display:inline-block; position:absolute; z-index:1; right: 0px; top: 10px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; height:80px; width:1px; } And in the body: <svg class="svgclass"><line x1="0" y1="0" x2="0" y2="80" /></svg> This is not work... (And the svg style is set good, cause when I remove the class from the svg, and change in the css file to svg its all great..) Thanks! (:
  7. We need to display machine statuses based on time according to the attached screenshot using HTML5, CSS and SVG ?I thought of using Stack Bar chart but in the current context, a status can be repeated multiple times in a given timespan.For ex, In a given timespan, 11PM - 11:30Pm, what are the different statuses a machine is transitioned into ?Each state is represnted by a color.Can any one suggest how to generate this chart ?
  8. I don't understand the X-Axis-Rotation. One definition says it indicates how the ellipse is rotated relative to the current coordinate system. What do they mean by rotated? What do they mean by the current coordinate system?
  9. I'm sorry for this very prosaic topic: What does exactly mean: 'scalable vector graphics'? 1 - It means that when you reduce browser's window into a smaller size, the graphic (a circle for example) reduces itself keeping its shape, avoid the overlapping of the browser's window? 2 - Or it means that the created shape on screen is gonna have a different size, relatively to the window's size? 3 - Or it's relative to the computation's value of the script that will make the shape? Sorry again (...blushing), thanks to anyone who'll reply to this unbelievable topic...
  10. Hi, I have this following code: http://jsfiddle.net/dustcomposer/bapwnhy0/ var cresc_path = '<path class="dyna_line" id="dyna_line" d="M ' + 0 + ' ' + 0 + ' L ' + 50 + ' ' + 25 + ' M ' + 0 + ' ' + 50 + ' L ' + 50 + ' ' + 25 + '" style="stroke-width: 1; stroke: red; fill:none;" />';var dl = document.createElementNS("http://www.w3.org/2000/svg", "svg");dl.setAttribute('class', 'dyHolder');dl.setAttribute('id', 'dyHolder');dl.setAttribute('style', 'border:1px solid red');dl.setAttribute('width', '50');dl.setAttribute('height', '50');dl.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");dl.innerHTML = cresc_path;document.getElementById('a').appendChild(dl);var str = '<svg class="dyHolder" id="dyHolder" style="border:1px solid red" width="50" height="50" xmlns:xlink="http://www.w3.org/1999/xlink"><path class="dyna_line" id="dyna_line" d="M 0 0 L 50 25 M 0 50 L 50 25" style="stroke-width: 1; stroke: red; fill:none;"></path></svg>';document.getElementById('b').innerHTML = str; both dl and str does result a svg image in html page. but when I grab similar string with str from json file, it appears as text like: <svg class="dyHolder" id="dyHolder" style="border:1px solid red" width="50" height="50" xmlns:xlink="http://www.w3.org/1999/xlink"><path class="dyna_line" id="dyna_line" d="M 0 0 L 50 25 M 0 50 L 50 25" style="stroke-width: 1; stroke: black; fill:none;"></path></svg> can anyone explain what the problem is? UPDATE: I've found the problem! the saved json structure must be typed neat. If the json structure made like this: [[ "28/11/2014 - 7:7", "", "", ""],[ "", "", "", ""],["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "<svg class="dyHolder" id="dyHolder" style="border:none" width="140" height="10" xmlns:xlink="http://www.w3.org/1999/xlink"><path class="dyna_line" id="dyna_line" d="M 0 0 L 140 5 M 0 10 L 140 5" stroke-width="1" stroke="black" fill="none"></path></svg>"]] the svg (as string) won't appears as svg but a paragraph/text. therefore it should written like this: [[ "28/11/2014 - 7:7", "", "", ""],[ "", "", "", ""],[ "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],[ "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],[ "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],[ "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "<svg class="dyHolder" id="dyHolder" style="border:none" width="140" height="10" xmlns:xlink="http://www.w3.org/1999/xlink"><path class="dyna_line" id="dyna_line" d="M 0 0 L 140 5 M 0 10 L 140 5" stroke-width="1" stroke="black" fill="none"></path></svg>"]] Everything works well now.
  11. hello, I am new to this forum and beginner in html5 language . My goal is to create a canvas or svg that consists of grid where I can add rectangles and circles with specific sizes and positions(by dragging objects). what I should use and how I can save all information like sizes and positions in my database to display or modify it in another page. is the example thanks.
  12. I was guided toward svg when I found out about vector resizable feature... now that I went through the svg guide on w3school(which was just a guise of it). I come to wonder if I can use that over canvas api?What do you guys think?Gaming propose, which one would be efficient in formatting games?
  13. L8V2L


    expand the SVG tutorial, and reference explanation etc. web animation is being implementing.
  14. I'm trying to work with SVGs but I'm pretty sure there's going to be some people using the old browsers that don't do this, so I'm looking into installing some kind of a fallback. Is there some way I can do this? Maybe make a DIV with the PNG for the background and containing the SVG?
  15. Hi, I'm trying to use an svg file to display a logo instead of a png file, but when they don't render the same font and image in the browser. Anyone have an idea why the svg file doesn't display in the browser like in the svg editor (inkscape)? This is a link to the site: www.10elearning.com
  16. Hello!I'm working on a portfolio on XML languages and want to include some thoughts of users about those languages such as RSS,SVG, SMIL and so on. Are there any websites I can read upon opinions related to those topics. Maybe some thought about the how those languages will do in the future. Thank you!
  17. Hi,I tried the following code but can not get the result of textLength and lengthAdjust. Why? I created the SVG file and opened it with the browser (explorer, firefoz, chrome) but I get the same result. <?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" xmlns="http://www.w3.org/2000/svg"><g style="font-size: 14pt;"> <path d="M 20 10 20 70 M 220 10 220 70" style="stroke: gray;"/> <text x="20" y="30" textLength="200" lengthAdjust="spacing">Two words</text> <text x="20" y="60" textLength="200" lengthAdjust="spacingAndGlyphs">Two words</text> <text x="20" y="90">Two words <tspan style="font-size: 10pt;">(normal length)</tspan></text> <path d="M 20 100 20 170 M 100 100 100 170" style="stroke: gray;"/> <text x="20" y="120" textLength="80" lengthAdjust="spacing">Two words</text> <text x="20" y="160" textLength="80" lengthAdjust="spacingAndGlyphs">Two words</text></g> </svg> Thanks
  18. Hello. I am very stuck at one point in my web-page project, and I hope that anyone of you can help me. In short, I'm trying to achieve an AJAX-like effect in a SVG-document. What I mean is that when the SVG-document (in my example below called SVGPage.php) has finished loading and is just sitting there waiting, I want to use AJAX on the click of an SVG-element (in my example the rectangle) to send a request to an external PHP-file (in my example called UpdateSVGPage.php).This "UpdateSVGPage.php" is building up SVG-code based on information from a database, and it will echo it back to the SVG-document via the same AJAX-request.The newly received SVG-code is deployed to a specific element in the SVG-code (in my example a <g>-element with the id="new_svg_shape"), and the new shape is instantly rendered and view-able on the SVG image.When the user clicks on the specific shape once again, the whole process should be repeated (meaning that a change in the database would create a different SVG-image). I have made an attempt below (which is not working), and I hope that my intentions are understandable. index.php <?phpsession_start();?><!DOCTYPE html><html> <head> </head> <body> <embed src="SVGPage.php" type="image/svg+xml" width="1000px" height="1000px"/> </body> </html> UpdateSVGPage.php <?phpsession_start(); //get the q parameter from URL $q=$_POST["input"]; echo "<rect x=\"1200\" y=\"233\" width=\"80\" height=\"20\" fill=\"blue\" />"; ?> SVGPage.php <?phpsession_start();header('Content-Type: image/svg+xml');print('<?xml version="1.0" standalone="no"?>');?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> <script type="text/ecmascript" xlink:href="Library.js"/> <script type="application/ecmascript" > <![CDATA[ function ajax_function(){ var xmlhttp; if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); } xmlhttp.onreadystatechange=function(input){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("new_svg_shape").firstChild.data=xmlhttp.responseXML; } } xmlhttp.open("POST","UpdateSVGPage.php?q="+input,true); xmlhttp.send(); } ]]> </script> <rect height="100" width="100" fill="blue" onclick="ajax_function()"> </rect> <g id="new_svg_shape" /> </svg> A big thanks to anyone who might help me !
  19. Ok friends: I'm totally stuck, and I desperately need some guidance from you professionals. For the last couple of months I've been working on a web-page project.This is what I've got so far: - I've got a HTML5 page (index.php)- In this HTML5 page, I've got an embedded SVG-file, which is converted to a PHP-file (drawing.php)- It is converted to PHP, because it uses some data in a database to decide what the SVG-image should look like.- In this SVG-file, a PHP-script builds some graphics, and applies some animations to it.- The SVG-file also has a javascript-library attached to it, which I need for zooming and panning the SVG-image. Everything is fine so far, however now starts the problems:I've got some other data in my database, which is supposed to be displayed on the SVG-image only after the user clicks on a specific shape belonging to the SVG-image. The only possible way I could imagine this to work would be to use AJAX, however I have no idea how to use AJAX together with an embedded SVG-file.Googling for days hasn't help me too much either. I would be very grateful to anyone who could provide some help.
  20. I have included a SVG-file into the html-page with the embed-tag, like this: index.html <!DOCTYPE html><html><head> <script type="text/javascript" src="jquery-1.7.1.js"/> function AJAX(){ $.post("UpdatePage.php",function (PhpParameter){ $("#SVGfile").html(PhpParameter); });} </head> <body> <div style="height:50px;width:50px;background-color:black;" onclick="AJAX()"/> <embed src="SVGimage.svg" type="image/svg+xml" /></body></html> The SVG-file looks like this: SVGimage.svg <?xml version="1.0" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> <script type="text/ecmascript" xlink:href="Library.js"/> </svg> The Library.js -file contains a nessicary library to zoom and pan my SVGimage.svg document. Library.js uses the XML-DOM. I use jQuery's POST method together with a PHP-file, which retrieve data from the database and parse it back to the html-file. The problem is:I have stored information in a MySQL database telling what the SVG-picture should look like. How can I transfer this information into the embedded SVG-file? Unfortunatly, I can't used <svg> tags directly in the HTML-file, because the Library.js file is written for the XML-DOM. I didn't write it, and I'm not good enough to convert it into using the HTML-DOM. Any help is very welcome! This has turned out to be a huge headache.
  • Create New...