<?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" xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/" width="70.4094in" height="34.0787in"
viewBox="0 0 20000 10000" xml:space="preserve" color-interpolation-filters="sRGB" class="st238">
<defs>
<g id="text1">
<title> </title>
<v:textRect cx="0" cy="0" width="19.2" height="0"/>
<text x="0" y="0"> text to display </text>
</g>
</defs>
<g>
<use x="100" y="100" xlink:href="#text1"/>
<use x="200" y="200" xlink:href="#text1"/>
</g>
</svg>
In my code I'm using the same object twice with use and xlink, do you know how I could pass parameters with the xlink (for example the param for the text instead to display "text to display" ) ?
Related
I tried that code but "The text to be referenced to" is never displayed on the screen, maybe it's because xlink is deprecated; would you know how to update that code to make it working ? Or what function should I use instead of xlink:href ?
Thank you very much in advance :)
<svg xmlns="http://www.w3.org/2000/svg" version="1.0"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<text id="Textref">
The text to be referenced to
</text>
</defs>
<text x="20" y="20" font-size="30" fill="#9d1d20" >
Inline text
</text>
<text x="20" y="40" font-size="30" fill="red" style="text-decoration:underline;">
<tref xlink:href="#Textref"/>
</text>
</svg>
The tref tag may not be supported by your browser. You would need a use tag:
<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" version="1.0"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<text id="Textref">
The text to be referenced to
</text>
</defs>
<text x="20" y="20" font-size="30" fill="#9d1d20" >
Inline text
</text>
<use x="20" y="40" href="#Textref" font-size="30" fill="red" style="text-decoration:underline;" />
</svg>
tref has been dropped from SVG 2 and no current browser supports it. Just put the text inline wherever you want it.
<svg xmlns="http://www.w3.org/2000/svg" version="1.0"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100%">
<text x="20" y="20" font-size="30" fill="#9d1d20" >
Inline text
</text>
<text x="20" y="40" font-size="30" fill="red" style="text-decoration:underline;">
The text to be referenced to
</text>
</svg>
I'm attempting to use this plugin on every SVG in a given project.
I believe the default compression or reformatting of the svg's themselves is causing issues however.
For example, I have a standard three bar menu icon:
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg width="200px" height="180px" viewBox="0 0 200 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Artboard-1" fill="#D8D8D8"> <rect id="Rectangle-1" x="0" y="0" width="200" height="40"></rect> <rect id="Rectangle-1" x="0" y="70" width="200" height="40"></rect> <rect id="Rectangle-1" x="0" y="140" width="200" height="40"></rect> </g> </g> </svg>
But once it's compressed:
<symbol id="menu" viewBox="0 0 200 180"> <g fill="#D8D8D8" fill-rule="evenodd"><path d="M0 0h200v40H0zM0 70h200v40H0zM0 140h200v40H0z"/></g> </symbol>
Making it impossible for me to do any animation to the different rect items that I could do with it before it was moved into the sprite.
Is there any way to turn off the compression or reformatting?
According to the documentation it should be possible to remove svgo from the transformation process via
{
shape : {
transform : []
}
}
I have such a working main.svg file:
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs id ="mydefs">
<marker id="markerEnd" markerWidth="15" markerHeight="15" refX="7" refY="7" orient="auto">
<path d="M0,0 l7,7 l-7,7" style="stroke: #000000;fill: none;"/>
</marker>
</defs>
<line x1="0" y1="0" x2="200" y2="200" stroke="black" marker-end="url(#markerEnd)"/>
</svg>
Now I wish to move defs into a separated file.
defs.svg:
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs id ="mydefs">
<marker id="markerEnd" markerWidth="15" markerHeight="15" refX="7" refY="7" orient="auto">
<path d="M0,0 l7,7 l-7,7" style="stroke: #000000;fill: none;"/>
</marker>
</defs>
</svg>
I could use: marker-end="url(defs.svg#markerEnd)", but I wish to inject id's from defs.svg to main.svg to still use marker-end="url(#markerEnd)".
How do I change my main.svg to use marker identificator from external defs.svg?
Such main.svg does not draw markerEnd:
<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<use xlink:href="defs.svg#mydefs" />
</defs>
<use xlink:href="defs.svg#mydefs" />
<line x1="0" y1="0" x2="200" y2="200" stroke="black" marker-end="url(#markerEnd)"/>
</svg>
I know about Cross Origin Policy for local files in Google Chrome and this is not the issue, I tested on many other browsers.
if you need HTML to test SVG:
<!DOCTYPE html>
<html>
<head>
<style>
html, body, object {
width: 100%;
height: 100%;
}
</style>
<body>
<object type="image/svg+xml" data="main.svg"></object>
</body>
</html>
There is such question:
I it possible to include external SVG defs
But from those answers I can't understand how to solve the problem.
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1 /DTD/svg11-flat-20030114.dtd">
<svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs >
<symbol overflow="visible" id="rect1">
<rect x="142" y="67" width="81" height="67" fill="#003399" stroke="none" stroke- opacity="0" xmlns="http://www.w3.org/2000/svg" />
</symbol>
</defs>
<defs >
<symbol overflow="visible" id="rect2">
<rect x="142" y="67" width="81" height="607" fill="#003399" stroke="none" stroke- opacity="0" xmlns="http://www.w3.org/2000/svg" />
</symbol>
</defs>
<use xlink:href="#rect1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<animateTransform attributeName="transform" begin="0" dur="0.5" fill="freeze" additive="sum" from="-65 7" to="0 0" type="translate" />
<animateTransform attributeName="transform" begin="0.5" dur="0" fill="freeze" additive="sum" from="21 2" to="21 2" type="translate" />
</use>
<circle id="circle" cx="284.5" cy="142.5" r="56.5" fill="#000000" stroke="none" stroke-opacity="0" transform="matrix(1,0,0,1,-1,-34)" xmlns="http://www.w3.org/2000/svg" />
</svg>
this is the code of my svg , it is a sample , i want to change the href id
<use xlink:href="#rect1"
whenever i will chick on the current object
if i will replace the id to
<use xlink:href="#rect2"
it will show another rect, i want to do it at runtime in the browser, on click change the object id at reference
can anyone help me
Here's a quick answer (updated 27/05/13: added <script> tag)
<use id="myImage_ID" xlink:href="#rect1" onclick="myFunc()" .... >
<script> <![CDATA[
function myFunc() {
var svgImg = document.getElementById('myImage_ID')
svgImg.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href" , '#rect2')
}
]]> </script>
I would like to create resolution independent SVG that uses <image> element. Is it possible to test for actual pixel ratio of the user agent? Please look at the example:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="480">
<defs>
<pattern id="test" patternUnits="userSpaceOnUse"
x="0" y="0" width="130" height="100"
viewBox="0 0 130 100" >
<IF PIXEL RATIO = 2>
<image xlink:href="test_2x.png" id="svg_1" height="100" width="130" y="0" x="0"/>
<ELSE>
<image xlink:href="test.png" id="svg_1" height="100" width="130" y="0" x="0"/>
<END IF>
</pattern>
</defs>
<rect id="rectangle" stroke="rgb(29, 29, 255)" fill="url(#test)" x="50" y="47" width="320" height="240" />
</svg>
I only have found Switch Element in the documentation but it doesn't seem to be very helpful since there is no "retina display" feature. Or is there? :)
You could use CSS media selectors to detect retina displays. Using the display property, you can switch the images on and off depending on the device.
I don't have an Apple retina device at hand to test, but I think something like this should work:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="640" height="480">
<style type="text/css">
#media all {
#test_2x_png {display:none}
}
#media (-webkit-min-device-pixel-ratio: 2) {
#test_png {display:none;}
#test_2x_png {display:inline;}
}
</style>
<defs>
<pattern id="test" patternUnits="userSpaceOnUse"
x="0" y="0" width="130" height="100"
viewBox="0 0 130 100" >
<image xlink:href="test_2x.png" height="100" width="130" y="0" x="0" id="test_2x_png"/>
<image xlink:href="test.png" height="100" width="130" y="0" x="0" id="test_png"/>
</pattern>
</defs>
<rect id="rectangle" stroke="rgb(29, 29, 255)" fill="url(#test)" x="50" y="47" width="320" height="240" />
</svg>