I answered to you in your other question: Use
and then with CSS and the viewbox attribute, you may size them ans have them rescale by themselves.
There are some solution.
- copy graphic by "use" element.
This is sample svg code for second solution.
If two svg elements exist in same html document, you can use this.
It is static structure, so when you change mainSVG's graphic, svgMini will be changed automatically.
<svg id="mainSVG" height="200px" width="200px"> <rect x="10" y="10" width="180" height="180" fill="red"/> <circle cx="100" cy="100" r="90" fill="orange"/> </svg> <!--wrap symbol and refer this--> <svg id="svgMini" height="100px" width="100px"> <defs> <symbol viewBox="0 0 200 200" id="resizable"> <use xlink:href="#mainSVG"/> </symbol> </defs> <use xlink:href="#resizable" width="100%" height="100%"/> </svg>
- How can I copy the content of my SVG and append it to another SVG frame?
- How can I get the natural width and height of an svg image element?
- How can I apply a clipPath in SVG with multiple paths and NOT clip out the area between the paths?
- How can I scale an SVG so that the content drawn in it to fit the container size?
- How to modify the content of an svg based dom using nodejs, d3 and jsdom?
- d3.js - How can I set the cursor to hand when mouseover these elements on SVG container?
- How can I get the D3.js axis ticks and positions as an array?
- D3 how to change the width and length of SVG
- How can I change the radius and opacity of a circle in d3?
- D3, SVG and textPath: How to move the text down?
- How can I set the each line color or width in SVG path
- How can I display a placeholder image in my SVG until the real image is loaded?
- How can I connect two parent node into one child node and how to make a tooltip for each node in the tree pragmatically? in D3 js (SVG)
- How can I find the translated co-ordinates of an SVG element?
- How can i get the startAngle and endAngle of each arc in the sunburst example using d3.js?
- How to maintain the SVG marker width and height ?
- How do I create a minimap of an SVG using D3 v5 and show the current viewport dimensions?
- How can I use SVG translate to center a d3.js projection to given latitude and longitude values?
- How can I add images in the nodes of a D3 Sankey diagram, using the rcv and networkD3 packages in R?
- How can I dynamically change the position and the size of direction arrows on a directed d3.js force layout?
- How can I offset the source and target points of a bezier curve using D3's link generator?
- How to get the width and height of an image? ( getBBox() size of SVG return 0 )
- How can I append string to y-axis data with tick and d3.format?
- How can the elements in SVG can't be dragged out of the scope of SVG?
- How can I put the Germany map on a svg in HTML? D3js
- how can update the name of the legends and tooltip in a scatter plot?
- Using d3 in meteor on windows 8.1, how can I display a world map, zoomed in on the US, with country borders and US state borders?
- How can I scale my map to fit my svg size with d3 and geojson path data
- How do I append the text tag to just one svg e.g. svg tag with "id=50"?
- How can I get the dom svg element from d3 node data?
More Query from same tag
- Trouble adding and removing elements in d3
- how to change descrete bar color onmouseover - angular-nvd3
- Area chart with multicolour gradient
- Create dynamic Word Cloud using d3.js
- D3.js Force Layout Graph blank space with external data
- Dynamic legend based on data
- Transform parsed percentage data into new array
- D3.js Bubble Chart from csv
- Can I display D3 graphs on .epub?
- d3 v4 error this.setAttribute is not a function
- NVD3 reuse values in multiple group charts
- dynamically update d3.js treemap
- d3 transition click on node
- Populate table with D3
- d3 example for network visualization having collapsible zoom feature
- How to append path from data inside nested structure in d3.js?
- How to show data with small value on c3.js Donut
- Pulling data from a database for a C3js chart
- Dimplejs can deal with array of objects in each Json Object
- Simple stacked row chart
- Load and parse multiple csv files with D3.js
- Remove comma to separate groups of thousands of axis labels in D3
- Static force layout in D3 v4
- How to make tooltips show up in d3.js on 'mouseover' and be removed at 'mouseout'?
- Visualize data count in d3
- C3.js SVG visualization to Canvas with canvg - Line charts filled with black rectangles , "ERROR: Element 'parsererror' not yet implemented"
- How do I import a PostgreSQL table into d3 for use?
- d3 horizontal bar chart with background and max value of 100%
- Directed acyclic graph using d3.js without DOT
- What's the increment operator doing here and how it changes the scale?