<svg>
<!--SOME SVG CODE HERE-->
<g id="bg"> <!--More svg code-->
</g>
</svg>
<!--Imports-->
<script src="script.js"></script>
<link rel="stylesheet" href="st.css">
</html>
CSS:
#bg{
height:100%;
}
When i use javascript to change the height:
document.getElementById("bg").style.height = "500px"
nothing happens, and, when i try to print the height in screen, it's returns nothing:
alert(document.getElementById("bg").style.height)
what can i do to change the height with javascript.
if you need to give a width and a height to an element inside an svg element you have to use a <symbol> with a viewBox instead of a group. Next you have to use the <symbol>and you can give a width and a height to the <use> element
svg{border:solid}
<svg viewBox="0 0 200 100" width="300">
<symbol id="c" viewBox="0 0 20 20">
<circle cx="10" cy="10" r="5"/>
</symbol>
<use xlink:href="#c" x="10" y="10" width="40" height="40" />
</svg>
Related
I have a problem with my site, once i build the project with parcel, when i host the site with github pages some SVG imported Images (for example as background image in css) or some SVG tags (in html file) don't load.
For example the following SVG is not loaded:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" id= "clickPad1" height="210px" width="210px" class="" style="position: absolute; top:-5px; left:-5px;>
<circle id="circleClick" r ="5" fill="white"></circle>
</svg>
Instead the following is loaded:
<svg style="position: fixed; top:35px; left:36px" width="20" height="20">
<circle r="2" fill="black">
<animate attributeName="cx" values="2;8;3;5;4;2" dur="8s" repeatCount="indefinite" />
<animate attributeName="cy" values="2;3;2;8;5;2" dur="10s" repeatCount="indefinite" />
</circle>
</svg>
In the first svg the circle is missing the attributes cx and cy. Now, I don't know the context, but make sure that the fill color sticks out. I changed it to black. The style attribute in <svg> was missing a quote-mark ("). The attributes with and height don't need the length type (px).
<svg xmlns="http://www.w3.org/2000/svg" id="clickPad1" height="210" width="210" style="position: absolute; top:-5px; left:-5px;">
<circle id="circleClick" cx="20" cy="20" r="5" fill="black"/>
</svg>
Is it possible to set a background-image for an SVG <path> element?
For instance, if I set the element class="wall", the CSS style .wall {fill: red;} works, but .wall{background-image: url(wall.jpg)} does not, neither .wall {background-color: red;}.
You can do it by making the background into a pattern:
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image href="wall.jpg" x="0" y="0" width="100" height="100" />
</pattern>
</defs>
Adjust the width and height according to your image, then reference it from the path like this:
<path d="M5,50
l0,100 l100,0 l0,-100 l-100,0
M215,100
a50,50 0 1 1 -100,0 50,50 0 1 1 100,0
M265,50
l50,100 l-100,0 l50,-100
z"
fill="url(#img1)" />
Working example
I have SVG file that i created it in photoshop. I would like to use it in my html page with clip-path property. I am trying to implement it as using clip-path:url(#mysvg); and paste the svg code to my html page. But i does not work. How can i do that?
My purpose is like this with css:
Here is the .svg file:
https://svgshare.com/i/dfw.svg
Here is the svg code
<!--IMAGE-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 814 506" >
<image id="image" class="image__svg-image" width="100%" height="100%" clip-path="url(#mask)" x="-100px" xlink:href="https://res.cloudinary.com/alvarosaburido/image/upload/v1589435086/blog/The%20Magic%20of%20SVG%20Clip-path/pic_yo5eyq.png" />
</svg>
<!--MY SVG FILE-->
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1920" viewBox="0 0 1920 1920">
<metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c142 79.160924, 2017/07/13-01:06:39 ">
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<rdf:Description rdf:about=""/>
</rdf:RDF>
</x:xmpmeta>
<?xpacket end="w"?></metadata>
<defs>
<style>
.cls-1 {
fill: #fff;
fill-rule: evenodd;
}
</style>
</defs>
<path id="rect1" class="cls-1" d="M133,333.637L1426.05,171.265a157.557,157.557,0,0,1,175.99,136.647l157.93,1256.5L466.929,1726.79a157.574,157.574,0,0,1-176-136.65Z"/>
</svg>
In this example the viewBox of the <svg> is 100 in width and the image also takes up 100% of the width. So, no matter the actual width of the image it will always fill the entire SVG.
The <clipPath> fits in the size of the viewBox of the <svg> that holds the image. I know the width is 100, so I made the clippath 70 in height and width plus the extra height that the rotation takes up. This matches kind of the height of the images (unknown at this point).
I replaced the content of the <clipPath>. It is more "transparent" what the clip path does and easier to manipulate.
<!--IMAGE-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="300">
<image width="100%" href="https://res.cloudinary.com/alvarosaburido/image/upload/v1589435086/blog/The%20Magic%20of%20SVG%20Clip-path/pic_yo5eyq.png" clip-path="url(#mask)" />
</svg>
<!--MY SVG FILE-->
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<defs>
<clipPath id="mask" transform="translate(15 0) rotate(-10 60 0)">
<rect width="50" height="50" />
<rect x="20" y="20" width="50" height="50" />
<rect x="20" width="50" height="50" rx="10" />
<rect y="20" width="50" height="50" rx="10" />
</clipPath>
</defs>
</svg>
Update
OP asks if the original path can be used as a clip-path. It can, but the viewBox needs to be modified accordingly. So, if the viewbox 0 0 2300 1800 is used the path fits the image.
<!--IMAGE-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2300 1800" width="300">
<image width="100%" href="https://res.cloudinary.com/alvarosaburido/image/upload/v1589435086/blog/The%20Magic%20of%20SVG%20Clip-path/pic_yo5eyq.png" clip-path="url(#mask)" />
</svg>
<!--MY SVG FILE-->
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<defs>
<clipPath id="mask" transform="translate(350 0)">
<path id="rect1" class="cls-1" d="M133,333.637L1426.05,171.265a157.557,157.557,0,0,1,175.99,136.647l157.93,1256.5L466.929,1726.79a157.574,157.574,0,0,1-176-136.65Z"/>
</clipPath>
</defs>
</svg>
Update
To "path" or not to "path", that is the question. This third example is a better solution. The path is simpler and there are not that many child elements in <clipPath>.
<!--IMAGE-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11" width="300">
<image width="100%" href="https://res.cloudinary.com/alvarosaburido/image/upload/v1589435086/blog/The%20Magic%20of%20SVG%20Clip-path/pic_yo5eyq.png" clip-path="url(#mask)" />
</svg>
<!--MY SVG FILE-->
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<defs>
<clipPath id="mask" transform="translate(2 0) rotate(-10 7 0)">
<path d="M 0 0 L 6 0 A 1 1 90 0 1 7 1 L 7 7 L 1 7 A 1 1 90 0 1 0 6 Z"/>
</clipPath>
</defs>
</svg>
Update
This fourth example is using the original path, BUT defined in a <clipPath> and used as an external reference in CSS. The external SVG file have the following content:
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="mask" transform="translate(350 0)">
<path id="rect1" class="cls-1" d="M133,333.637L1426.05,171.265a157.557,157.557,0,0,1,175.99,136.647l157.93,1256.5L466.929,1726.79a157.574,157.574,0,0,1-176-136.65Z"/>
</clipPath>
</defs>
</svg>
But for this example I replace the URL (like https://svgshare.com/i/dfw.svg#rect) to the SVG file with a data URI.
svg>image {
clip-path: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPGNsaXBQYXRoIGlkPSJtYXNrIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNTAgMCkiPgogICAgICA8cGF0aCBpZD0icmVjdDEiIGNsYXNzPSJjbHMtMSIgZD0iTTEzMywzMzMuNjM3TDE0MjYuMDUsMTcxLjI2NWExNTcuNTU3LDE1Ny41NTcsMCwwLDEsMTc1Ljk5LDEzNi42NDdsMTU3LjkzLDEyNTYuNUw0NjYuOTI5LDE3MjYuNzlhMTU3LjU3NCwxNTcuNTc0LDAsMCwxLTE3Ni0xMzYuNjVaIi8+CiAgICA8L2NsaXBQYXRoPgogIDwvZGVmcz4KPC9zdmc+#mask');
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2300 1800" width="300">
<image width="100%" href="https://res.cloudinary.com/alvarosaburido/image/upload/v1589435086/blog/The%20Magic%20of%20SVG%20Clip-path/pic_yo5eyq.png" />
</svg>
Let's say I have the following html context, which I don't have access to its creation :
<div id="outer">
<div id="chart-div">
<svg id="chart"></svg>
</div>
<div id="legend-div">
<svg id="legend"></svg>
</div>
</div>
What I'm trying to do is export this SVG to an image using canvg library, the problem here is that they are separated and so I get two canvas, and canvg library accepts a SVG definition string as input.
How can I modify the html elements above so that they are only one SVG? Using Javascript as this is a browser extension.
I have tried just switching the DIVs tags to SVG but it just broke everything and the SVG became blank
This is my solution to your problem: I make the outer div display:none, I'm creating another svg element (you may do it dynamicaly) end inside the #new svg I'm using the #chart and the #legend. I hope it helps.
svg{border:1px solid;}
#outer {display:none}
#outer div{position:absolute; width:500px;}
<div id="outer">
<div id="chart-div">
<svg id="chart" viewBox="0 0 300 150">
<circle stroke="gold" fill="none" cx="100" cy="75" stroke-width="40" stroke-dasharray="124.85" stroke-dashoffset="20" r="20" />
</svg>
</div>
<div id="legend-div">
<svg id="legend" viewBox="0 0 300 150">
<rect fill="skyBlue" x="200" y="100" width="80" height ="30" />
</svg>
</div>
</div>
<svg id="new" viewBox="0 0 300 150" width="500">
<use xlink:href="#chart" />
<use xlink:href="#legend" />
</svg>
This is a Javascript solution for merging two svg accessibles in the document through DOM manipulation.
var svgNS = "http://www.w3.org/2000/svg";
var outer = document.getElementById('outer');
// get chart content
var chart = document.getElementById('chart-div');
var chartSvg = chart.getElementsByTagName('svg')[0];
var chartContent = Array.from(chartSvg.childNodes);
// get legend content
var legend = document.getElementById('legend-div');
var legendSvg = legend.getElementsByTagName('svg')[0];
var legendContent = Array.from(legendSvg.childNodes);
// create a merged-div where we are going to merge the svgs
var merged = document.createElement('div');
merged.setAttribute('id', 'merged-div');
outer.appendChild(merged);
// createElementNS for svg
var mergedSvg = document.createElementNS(svgNS, 'svg');
mergedSvg.setAttribute('id', 'merged');
// keep the viewBox of the chart
mergedSvg.setAttribute('viewBox', chartSvg.getAttribute('viewBox'));
merged.appendChild(mergedSvg);
// adding the content of both svgs
for (let i = 0; i < chartContent.length; i++) {
mergedSvg.appendChild(chartContent[i]);
}
for (let i = 0; i < legendContent.length; i++) {
mergedSvg.appendChild(legendContent[i]);
}
// the unmerged svgs can be removed
chart.remove();
legend.remove();
<div id="outer">
<div id="chart-div">
<svg id="chart" viewBox="0 0 300 150">
<circle stroke="gold" fill="none" cx="100" cy="75" stroke-width="40" stroke-dasharray="124.85" stroke-dashoffset="20" r="20" />
</svg>
</div>
<div id="legend-div">
<svg id="legend" viewBox="0 0 300 150">
<rect fill="skyBlue" x="200" y="100" width="80" height ="30" />
</svg>
</div>
</div>
Resulting markup:
<div id="outer">
<div id="merged-div">
<svg id="merged" viewBox="0 0 300 150">
<circle stroke="gold" fill="none" cx="100" cy="75" stroke-width="40" stroke-dasharray="124.85" stroke-dashoffset="20" r="20"></circle>
<rect fill="skyBlue" x="200" y="100" width="80" height="30"></rect>
</svg>
</div>
</div>
I wish to fit svg text inside a rect. I could use an approach to compare the widths and add line breaks to the text, but it's not tedious.
Is there a more elegant way than this? Maybe by using CSS or d3?
UPDATE:the following code appends foreignObject using d3 but the div is not displayed. (it is there in the code inspecter)
var group = d3.select("#package");
var fo = group.append("foreignObject").attr("x", 15).attr("y", 15).attr("width", 190).attr("height", 90);
fo.append("div").attr("xmlns", "http://www.w3.org/1999/xhtml").attr("style", "width:190px; height:90px; overflow-y:auto").text("Thiggfis the dgdexsgsggs wish to fit insidegssgsgs");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<p id="p"></p>
<svg width="220" height="120" viewBox="0 0 220 120" id="package">
<rect x="10" y="10" width="200" height="100" fill="none" stroke="black"/>
</svg>
A namespace cannot be assigned by attr, it's a side effect of element creation. You need an html div so you need to tell d3 that by calling the element xhtml:div, once you do that, d3 will do the rest.
var group = d3.select("#package");
var fo = group.append("foreignObject").attr("x", 15).attr("y", 15).attr("width", 190).attr("height", 90);
fo.append("xhtml:div").attr("style", "width:190px; height:90px; overflow-y:auto").text("Thiggfis the dgdexsgsggs wish to fit insidegssgsgs");
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<p id="p"></p>
<svg width="220" height="120" viewBox="0 0 220 120" id="package">
<rect x="10" y="10" width="200" height="100" fill="none" stroke="black"/>
</svg>
Here's a simple example of a foreignObject used to insert HTML markup into an SVG:
<svg width="220" height="120" viewBox="0 0 220 120">
<rect x="10" y="10" width="200" height="100" fill="none" stroke="black" />
<foreignObject x="15" y="15" width="190" height="90">
<div xmlns="http://www.w3.org/1999/xhtml" style="width:190px; height:90px; overflow-y:auto"><b>This</b> is the <i>text</i> I wish to fit inside <code>rect</code></div>
</foreignObject>
</svg>