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>
I am new to working with SVGs. I am trying to caption an svg of a person with that person's name. Here is my attempt:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 258.75 258.75" style="enable-background:new 0 0 258.75 258.75;" xml:space="preserve">
<g>
<circle cx="129.375" cy="60" r="60"/>
<path d="M129.375,150c-60.061,0-108.75,48.689-108.75,108.75h217.5C238.125,198.689,189.436,150,129.375,150z"/>
<text text-anchor="middle" x="60" y="75">Person Name Here</text>
</g>
</svg>
When I try to anchor the text below the image the text disappears. how do I
Change the size of the image?
Leave space at the bottom of the image for the person's name?
Here is the snippet:
var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 258.75 258.75" style="enable-background:new 0 0 258.75 258.75;" xml:space="preserve"> <g> <circle cx="129.375" cy="60" r="60"/><path d="M129.375,150c-60.061,0-108.75,48.689-108.75,108.75h217.5C238.125,198.689,189.436,150,129.375,150z"/><text text-anchor="middle" x="60" y="75">Person Name Here</text></g></svg>'
$('#name').append(svg);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="name">Hello</p>
This may be what you need:
You can change the size of the image with css, it will scale all your svg.
You just need to give some more space to the viewBox and position your name accordingly.
Hope this helps, snippet:
var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 258.75 350.75" style="enable-background:new 0 0 258.75 258.75;" xml:space="preserve"> <style>.style1 {font-size: 15px;} </style> <g> <circle cx="129.375" cy="60" r="60"/><path d="M129.375,150c-60.061,0-108.75,48.689-108.75,108.75h217.5C238.125,198.689,189.436,150,129.375,150z"/><text class="style1" text-anchor="middle" x="125" y="290">Person Name Here</text></g></svg>'
$('#name').append(svg);
svg, object {
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="name">Hello</p>
How to make this animated green bar visible only on circle?
<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="38px" height="38px" viewBox="0 0 38 38" xml:space="preserve">
<rect id="bar" y="10.962" fill="#02FF74" width="38" height="14.667">
Link to CodePen
With a clipPath you can create a mask.
you have a to create a <circle> inside a <defs> tag( it doesn't render element inside it and make it accessible )
you have to create a clipPath thate takes sizes and position from the circle using <use xlink:href="#circleID"...
you should add the attribute clipPath="url(#clipPathID)" to any element or group of element you want to mask.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200px" height="200px" viewBox="0 0 38 38" enable-background="new 0 0 37.833 37.833" xml:space="preserve">
<g>
<defs>
<circle id="SVGID_1_" cx="19" cy="19" r="19"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<rect id="bar" y="10.962" clip-path="url(#SVGID_2_)" fill="#02FF74" width="38" height="14.667">
<animate fill="freeze" from="40" to="-15" restart="always" dur="2s" attributeName="y" calcMode="linear" additive="replace" accumulate="none" repeatCount="indefinite">
</animate>
</rect>
<g clip-path="url(#SVGID_2_)">
<path d="M19,4.191c8.166,0,14.809,6.643,14.809,14.809S27.166,33.809,19,33.809S4.191,27.165,4.191,19S10.834,4.191,19,4.191
M19,0C8.508,0,0,8.507,0,19s8.508,19,19,19c10.493,0,19-8.507,19-19S29.493,0,19,0L19,0z"/>
<g>
<path d="M19,13.691c2.928,0,5.309,2.381,5.309,5.309S21.928,24.309,19,24.309S13.691,21.927,13.691,19S16.072,13.691,19,13.691
M19,9.5c-5.246,0-9.5,4.253-9.5,9.5s4.254,9.5,9.5,9.5s9.5-4.253,9.5-9.5S24.246,9.5,19,9.5L19,9.5z"/
</g>
</g>
</g>
</svg>
Just edited to show the animated element just inside the black fill of your circles. The process is the same of the previous example, but now The shape of the mask path has been created copying the d=".." attribute value from both black circles:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200" height="200" viewBox="0 0 38 38" enable-background="new 0 0 37.833 37.833" xml:space="preserve">
<g>
<g>
<path d="M19,4.191c8.167,0,14.809,6.643,14.809,14.809c0,8.167-6.643,14.809-14.809,14.809c-8.166,0-14.809-6.645-14.809-14.809
C4.191,10.835,10.834,4.191,19,4.191 M19,0C8.508,0,0,8.507,0,19c0,10.493,8.508,19,19,19c10.493,0,19-8.508,19-19
C38,8.507,29.493,0,19,0L19,0z"/>
<g>
<path d="M19,13.691c2.928,0,5.309,2.381,5.309,5.309c0,2.928-2.381,5.309-5.309,5.309S13.691,21.926,13.691,19
C13.691,16.073,16.072,13.691,19,13.691 M19,9.5c-5.246,0-9.5,4.253-9.5,9.5c0,5.247,4.254,9.5,9.5,9.5
c5.247,0,9.5-4.254,9.5-9.5C28.5,13.753,24.247,9.5,19,9.5L19,9.5z"/>
</g>
</g>
<g>
<defs>
<path id="SVGID_1_" d="M19,4.191c8.167,0,14.809,6.643,14.809,14.809c0,8.167-6.643,14.809-14.809,14.809
c-8.166,0-14.809-6.645-14.809-14.809C4.191,10.835,10.834,4.191,19,4.191 M19,0C8.508,0,0,8.507,0,19c0,10.493,8.508,19,19,19
c10.493,0,19-8.508,19-19C38,8.507,29.493,0,19,0L19,0z M19,13.691c2.928,0,5.309,2.381,5.309,5.309
c0,2.928-2.381,5.309-5.309,5.309S13.691,21.926,13.691,19C13.691,16.073,16.072,13.691,19,13.691 M19,9.5
c-5.246,0-9.5,4.253-9.5,9.5c0,5.247,4.254,9.5,9.5,9.5c5.247,0,9.5-4.254,9.5-9.5C28.5,13.753,24.247,9.5,19,9.5L19,9.5z"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<rect id="bar" y="10.962" clip-path="url(#SVGID_2_)" fill="#02FF74" width="38" height="14.667">
<animate fill="freeze" repeatCount="indefinite" accumulate="none" additive="replace" calcMode="linear" attributeName="y" dur="2s" restart="always" to="-15" from="40">
</animate>
</rect>
</g>
</g>
</svg>
Just wanted to ask is there any way of changing the svg text on load.
Standard SVG examples work just fine.
$(document).ready(function(){
document.getElementById('mySVGText').textContent = 'new_value';
});
it works on this svg
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg" id="mySVG">
<rect width="100%" height="100%" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text id="mySVGText" name="textName" x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>
but seems like this svg doesnt allow me to getElementById and change the text:
<svg version="1.1"
id="Capa_1"
xmlns="http://www.w3.org/2000/svg"
x="0px" y="0px"
viewBox="0 0 489 489"
style="enable-background:new 0 0 489 489;"
xml:space="preserve"
>
<text id="mySVGText" name="textName" x="160" y="400" font-size="280" text-anchor="middle" fill="blue">SVG</text>
<g>
<path style="fill:white" d="M440.1,422.7l-28-315.3c-0.6-7-6.5-12.3-13.4-12.3h-57.6C340.3,42.5,297.3,0,244.5,0s-95.8,42.5-96.6,95.1H90.3
c-7,0-12.8,5.3-13.4,12.3l-28,315.3c0,0.4-0.1,0.8-0.1,1.2c0,35.9,32.9,65.1,73.4,65.1h244.6c40.5,0,73.4-29.2,73.4-65.1
C440.2,423.5,440.2,423.1,440.1,422.7z M244.5,27c37.9,0,68.8,30.4,69.6,68.1H174.9C175.7,57.4,206.6,27,244.5,27z M366.8,462
H122.2c-25.4,0-46-16.8-46.4-37.5l26.8-302.3h45.2v41c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5v-41h139.3v41
c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5v-41h45.2l26.9,302.3C412.8,445.2,392.1,462,366.8,462z"/>
</g>
</svg>
Any help would be appreciated.
So that this doesn't show up as unanswered:
The problem was that there were two elements with the id mySVGText on the page. document.getElementById assumes that each id on the page is unique, so it can have unexpected behavior when they aren't.