I'm working on some Pen (I wan to create Depth of Field effect), I have html code inside foreign object and I want to apply filter + mask to to that element, for this I need to clone the element and mask it (or is there other way to apply mask to filter?)
I've tried with svg:use
<foreignobject id="code">
<body xmlns="http://www.w3.org/1999/xhtml">
<figure class="highlight">
<!-- HTML -->
</figure>
</body>
</foreignobject>
<use x="0" y="0" width="100%" height="100%"
filter="url(#blur)" mask="url(#mask)" xlink:href="#code"/>
but it don't work with foreign objects:
Here is my pen: https://codepen.io/jcubic/pen/VwwzVXO
Is there any other way I can use foreign objec to mirror it so I can apply filter+mask?
Related
Is there anyway to specify filters for an xlink:href in an svg? For example, I only want to reference 's from a specific parent/svg. If I have multiple svgs on that page, and both happen to contain an element with the same id, it seems that the xlink:href will always reference the first instance, regardless of which svg the xlink:href is.
For example,
...
<html>
<div id="div1">
<!-- first svg -->
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="car" viewBox="214.7 0 182.6 792">
<circle.../>
</symbol>
<div id="div2">
<!-- second svg -->
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="car" viewBox="214.7 0 182.6 792">
<rect.../>
</symbol>
...
<!-- This will show as a circle, instead of a rectangle -->
<use xlink:href="#car" .../>
</svg>
</html>`
Ideally, I would like to be able to use the unique div id's as reference. For example,
<use xlink:href="#div2 #car" .../>
I'm working on a mapping project and using SVG <image> elements as tiles always shows a seam between them. I can avoid the seams if I use <rect> elements with the css property "shape-rendering: crispEdges". However, when I try to fill these <rect> elements with a pattern that contains the tile image, there is some inconsistency in the alignment of the pattern in Chrome and FF (I'm using Chrome 45 and FF 41 right now).
I've isolated the issue in this jsfiddle. All of the transforms, svg size, rect size, etc are directly from the project I'm working on and it should be assumed they can't be changed. I can only change the pattern (or if there's a attribute/property like "shape-rendering: crispEdges" for <image> elements I can change that).
How can I get the pattern tile image to fully cover, and be properly aligned with, the <rect>?
HTML
<!-- change background from white to black to see what's going on -->
<!-- The SVG is large. The <rect> can be located a bit to the right of the center of the SVG -->
<!-- When BG is black, you can see a white edge on the left and bottom -->
<!-- When BG is white, you can see a dark edge on the top and right -->
<body style="background: white;">
<div style="position: fixed; x: 0; y: 0;">
<button onclick="whiteBG()">White BG</button>
<button onclick="blackBG()">Black BG</button>
</div>
<svg height="1965" version="1.1" width="5760" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern x="0" y="0" width="100%" height="100%" patternContentUnits="objectBoundingBox" id="patternSieyywid32k">
<!-- image is base64 encoded 415 x 512 image -->
<image xlink:href="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAAD//gATQ3JlYXRlZCB3aXRoIEdJTVD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCAIAAcMDAREAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAcIBv/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAG8KAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAJKAAAAAAAAAAAAAAAAAAAADrTrQAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAADB6AAAAAAAAAAAAAAAAAAAAC8F4UAAAAAAYPQAAAAAAAAAAAAAAAAAAAAXgvCgAAAAAD/8QAHBAAAgMBAAMAAAAAAAAAAAAAB1AABRcGBDCQ/9oACAEBAAEFAvlZpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJpdZNLrJQ9L43RORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXORc5FzkXe//xAAUEQEAAAAAAAAAAAAAAAAAAACw/9oACAEDAQE/AWQP/8QAFBEBAAAAAAAAAAAAAAAAAAAAsP/aAAgBAgEBPwFkD//EACYQAAAFBQABBAMBAAAAAAAAAAIFUIPCAAQzktIBAxETYRQwMZD/2gAIAQEABj8C/wArMF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqsF3oHqvX/GB6oPh9vf5fHjx/ff7+lkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbksmbclkzbl+/8A/8QAGhAAAQUBAAAAAAAAAAAAAAAAEQExUXGQsP/aAAgBAQABPyHNZEiRIkSJEiRIkSJEiRIkSJEiRIkSJEiRIkSJEiRIkSJEiRIkSK+M0YAVLm1Xd3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d3d//aAAwDAQACAAMAAAAQJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJAAAAAAAAAAAAAAAAAAAAABJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJAAAAAAAAAAAAAAAAAAAAAJJJJJJJIAAAAAAAAAAAAAAAAAAAABJJJJJJJ/8QAGREAAwEBAQAAAAAAAAAAAAAAARFQADCQ/9oACAEDAQE/EPKx555555555555555555555555555555555555555552hZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkWRZFkd//8QAFBEBAAAAAAAAAAAAAAAAAAAAsP/aAAgBAgEBPxBkD//EABsQAAIBBQAAAAAAAAAAAAAAABExASFBkLDR/9oACAEBAAE/EMa1mzZs2bNmzZs2bNmzZs2bNmzZs2bNmzZs2bNmzZs2bNmzZs2bPXuyTRWIcO2tpMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMz/AP/Z"
x="0" y="0" width="1" height="1" preserveAspectRatio="none"></image>
</pattern>
</defs>
<g transform="matrix(0.0049,0,0,0.0049,101.5334,3349.9742)" style="display: inline;">
<rect x="641958.5514" y="-516667.078" width="28275.123699999996" height="32099.475199999986" fill="url('#patternSieyywid32k')" style="shape-rendering: crispEdges;"></rect>
</g>
</svg>
</body>
JS
var whiteBG = function() {
document.querySelector('body').style.background = '#FFF';
}
var blackBG = function() {
document.querySelector('body').style.background = '#000';
}
The best solution I could come up with for this issue was to go back to using image elements, but instead of letting the browser handle the transform, I removed the transform from the group element and used some JS code to apply the transforms manually and update the x, y, width, and height attributes of each image element. Doing it this way, I have control over how to round the result to achieve pixel perfect tiles.
Why would a demo such as this: http://jsbin.com/ejorus/2/edit, have an <svg> element nested inside another <svg> element?
<svg class="graph">
<svg viewBox="0 0 1000 1000" preserveAspectRatio="none">
<g transform="translate(30,0)">
<!-- ... -->
</g>
</svg>
</svg>
The JS Bin is a modified version of the demo in this blog post: http://meloncholy.com/blog/making-responsive-svg-graphs/
Nesting SVG elements can be useful to group SVG shapes together, and
position them as a collection. All shapes nested inside an svg element
will be positioned (x, y) relative to the position (x, y) of its
enclosing svg element. By moving the x and y coordinates of the
enclosing svg element, you move all the nested shapes too.
Here is an example where two rectangles are nested inside two svg
elements. Except for the colors the two rectangles have the same
definitions for x, y, height, and width. The enclosing svg
elements have different x-values. Since the x-position of the
rectangles are interpreted relative to their enclosing svg elements
x-position, the two rectangles are displayed at different
x-positions.
- By Jakob Jenkov
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<svg x="10">
<rect x="10" y="10" height="100" width="100"
style="stroke:#ff0000; fill: #0000ff"/>
</svg>
<svg x="200">
<rect x="10" y="10" height="100" width="100"
style="stroke:#009900; fill: #00cc00"/>
</svg>
</svg>
Credits
You're right (as you say in Mr. Alien's answer) that both SVG elements have the same relative positions, and indeed the graph displays fine without the outer SVG.
The reason I added it is because the JavaScript (which I needed to stop the labels getting squished) uses the SVG element's transform matrix (caused by the applied viewBox attribute) to unscale the text.
Unfortunately the returned matrix doesn't take account of transformations applied to the SVG element itself, so I needed to get the transform matrix relative to an outer element that used the initial coordinate system instead. Hope that helps.
You can define a new viewport & viewbox. With this option, you can use relative positions like as css. For more information, you can see this online article.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Nested SVG</title>
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<svg width="100%" height="100%">
<rect x="25%" y="25%" width="50%" height="50%" style="fill: dodgerblue;" />
<svg x="25%" y="25%" width="50%" height="50%">
<rect x="25%" y="25%" width="50%" height="50%" style="fill: tomato;" />
</svg>
</svg>
</body>
</html>
I am about to do this for an entirely different reason: website implementation efficiency.
I have several SVG files that I insert into my web page after downloading them via AJAX. I want to consolidate them into one file because that's better for downloading. I could do this with a text file and then insert the SVG text into a web page element's innerHTML property, but .svg files offer two additional advantages over .txt files:
1) The standard .svgz format allows you to store pre-zipped files on the web server, no need for mod_deflate. SVG files zip very efficiently, I'm seeing 70-85% compression.
2) The web browser parses the SVG outside of my javascript code, hopefully more efficiently. To insert the svg element into the HTML, I use the parent element's insertBefore or appendChild method instead of innerHTML.
Say that I have an SVG container with a couple of shapes:
<svg>
<g class="container">
<rect id="first" x="0" y="0" width="100" height="100" fill="red" />
<rect id="second" x="100" y="0" width="100" height="100" fill="green" />
<rect id="third" x="200" y="0" width="100" height="100" fill="blue" />
</g>
</svg>
Using D3 I will manipulate the width of these shapes, for example in transitions. How do I make sure that the rects will always stay in this order, without any space between them? That is, if I modify the width of first, x of second and third will update instantaneously.
Option A: Create a treemap and set the sticky option to true: .sticky(true). The treemap layout provides you with x, y, width, and heigth values that you can use to manipulate your DOM/SVG. The sticky option takes care of smooth transitions.
Option B: Use plain html elements, such as div instead of svg:rect elements. If you really just manipulate the width, that should be the more reasonable option:
<style>
#container div{ float: left; }
</style>
<div id="container">
<div id="first" style="width:100px; height:100px; background-color:red;" ></div>
<div id="second" style="width:100px; height:100px; background-color:green;" ></div>
<div id="third" style="width:100px; height:100px; background-color:blue;" ></div>
</div>
Using plain html you can manipulate the width and the browser's layout/CSS engine handles the floating. D3 is not restricted to SVG, it can also handle normal html elements (the treemap example also uses div elements).
Btw: In d3 you should not manipulate the DOM directly. Always think of the underlying data and make the updates data driven, i.e., when using a treemap you would the set the item.value of a data item in your source data, e.g.:
data = [ {value: 100}, {value:200}, {value:100} ]
//...
updateData() //changes some values in your data
drawChart() //draws the whole chart based on the data, e.g., computes the x, y,
//width, height from the `item.value` (e.g., via d3.layout.treemap)
//and manipulates/animates the DOM via d3
I did a variation of a tree layout to make it into a flow layout. You can see the demo here and view the Gist here.
Is it possible to "use" a whole other svg within a separate svg? I want to use an map generated with d3 as an icon on the same page. This is what I tried but it doesn't work.
<svg id="map">
svg stuff here
</svg>
<svg id="bar">
svg stuff here
<use xlink:href="#map" height="20" width="30" ...>
</svg>
Also tried the cloning approach but ended up with an entire svg within another svg and couldn't get it to scale. eg. makeicon("#map", "#icon")
function makeicon(source, destination) {
//https://groups.google.com/forum/?fromgroups=#!topic/d3-js/-EEgqt29wmQ
var src = d3.select(source);
var dest = d3.select(destination);
if (!src.empty() && !dest.empty()) {
var newNode = d3.select(dest.node().insertBefore(src.node().cloneNode(true),
src.node().nextSibling))
.attr("id", "newnode")
.attr("width", null) // remove height and width of original svg
.attr("height", null)
.attr("viewBox", "0 0 20 30"); // try to make it smaller
return newNode;
It should work fine.
Here's a simple example that works fine in Firefox, Opera and Chrome:
http://jsfiddle.net/gew54/
Source:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type='text/css'>
svg {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<svg id="map" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="20" fill="lime"/>
</svg>
<svg id="bar" viewBox="0 0 100 100">
<use xlink:href="#map" />
</svg>
</body>
</html>
You can use svgWeb to make it work in webkit browsers.
Considering very limited support at the moment (Gecko engines only), this can be done using the CSS 3 element() function.
The MDN docs also specifies your case as a common use case:
... A particularly useful scenario for using this would be to render an
image in an HTML <canvas> element, then use that as a
background.
Live Demo
Since SVG 2, the [ xlink:href ] attribute is deprecated in favor of [ href ].
<use xlink:href="#myId" />
Deprecated: This feature is no longer recommended. Though some
browsers might still support it, it may have already been removed from
the relevant web standards, may be in the process of being dropped, or
may only be kept for compatibility purposes. Avoid using it, and
update existing code if possible; see the compatibility table at the
bottom of this page to guide your decision. Be aware that this feature
may cease to work at any time. INFO...
<use href="#myId" />
<svg viewBox="0 0 30 10" width="300" height="100" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/>
<use href="#myCircle" x="10" fill="blue"/>
<use href="#myCircle" x="20" fill="white" stroke="red"/>
<!--
stroke="red" will be ignored here, as stroke was already set on myCircle.
Most attributes (except for x, y, width, height and (xlink:)href)
do not override those set in the ancestor.
That's why the circles have different x positions, but the same stroke value.
-->
</svg>
Demo-codepen.io