How to place Javascript in SVG html box

How to place Javascript in SVG html box - javascript

Hi all I have the following code and I would like to place the javascript button inside the SVG box. I think I am not understanding how to pass the coordinated in order to place it inside. I am trying the following code but is not working
<!DOCTYPE html>
</head>
<body>
<div style="max-width:1000px;">
<div class="scaling-svg-container" style="padding-bottom: 100%; max-width: 1000px; margin: 0px auto 0px auto; ">
<svg id="ProvaJJ" class="scaling-svg" style="max-width: 1000px;" id="graphic" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 750 750" enable-background="new 0 0 750 750" xml:space="preserve">
<g id="background">
<rect fill="#C1D3E9" width="750" height="750"/>
<g> id="inputBackground">
<script>
function confirmAction() {
let confirmAction = confirm("Are you sure to execute this action?");
if (confirmAction) {
alert("Action successfully executed");
} else {
alert("Action canceled");
}
}
</script>
<!--<script>
alert( 'Hello, world!' );
</script> -->
<!--<polygon fill="#FFFFFF" points="114.089,97.5 114.089,180 353.064,204 592.039,180 592.039,97.5 "/> -->
<text transform="matrix(1 0 0 1 59.138 53.6896)" fill="#333333" font-family="'InterFace-Regular'" font-size="24px"> Alessia is a 25 years old, blond and outstanding PhD student
</tspan><tspan x="0" y="44.4" fill="#333333" font-family="'InterFace-Regular'" font-size="24px">She has a master degree in something.
</tspan></tspan><tspan x="0" y="94.4" fill="#333333" font-family="'InterFace-Regular'" font-size="24px">something .</tspan></text>
<script type = Javascript>
<ul id = "messages"></ul>
<input id = "textbox" type ="text">
<button id ="btn">click</button>
</script>
</svg>
</div>
</div>
s
<!--<script src="prova.js"></script>-->
</body>
</html>

There are two issues:
1- type = Javascript you need to add the property with double qoutetion or remove the type attribute. so you can use <script> or <script type="javascript"
2- don't write the html between script tags.
<!DOCTYPE html>
</head>
<body>
<div style="max-width:1000px;">
<div class="scaling-svg-container" style="padding-bottom: 100%; max-width: 1000px; margin: 0px auto 0px auto; ">
<svg id="ProvaJJ" class="scaling-svg" style="max-width: 1000px;" id="graphic" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 750 750" enable-background="new 0 0 750 750" xml:space="preserve">
<g id="background">
<rect fill="#C1D3E9" width="750" height="750"/>
<g> id="inputBackground">
<script>
function confirmAction() {
let confirmAction = confirm("Are you sure to execute this action?");
if (confirmAction) {
alert("Action successfully executed");
} else {
alert("Action canceled");
}
}
</script>
<!--<script>
alert( 'Hello, world!' );
</script> -->
<!--<polygon fill="#FFFFFF" points="114.089,97.5 114.089,180 353.064,204 592.039,180 592.039,97.5 "/> -->
<text transform="matrix(1 0 0 1 59.138 53.6896)" fill="#333333" font-family="'InterFace-Regular'" font-size="24px"> Alessia is a 25 years old, blond and outstanding PhD student
</tspan><tspan x="0" y="44.4" fill="#333333" font-family="'InterFace-Regular'" font-size="24px">She has a master degree in something.
</tspan></tspan><tspan x="0" y="94.4" fill="#333333" font-family="'InterFace-Regular'" font-size="24px">something .</tspan></text>
<a xlink:href="#" id="btn"><polygon fill="none" points="162,263.3 251.6,256 252.7,273.3 163,280.5"/><text id="messages" x="0" y="184.4" fill="#333333" font-family="'TradeGothicLT-Bold'" font-size="12.9937">Click</text></a>
<script>
document.getElementById('btn').addEventListener('click',(e)=>{
e.preventDefault()
document.getElementById('messages').textContent = "clicked"
})
</script>
</svg>
</div>
</div>
<!--<script src="prova.js"></script>-->
</body>
</html>

Related

External SVG file in clippath

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>

How to access style properties of externally insert svg file?

Here I can access the style of the svg:
svg {
fill: skyblue;
}
<svg viewBox="0 0 100 100" width="500px" height="500px"
xmlns="http://www.w3.org/2000/svg" data-name="Layer 1">
<path d="M6,6A2,2,0,0,1,8,4,1,1,0,0,0,8,2,4,4,0,0,0,4,6V9a2,2,0,0,1-2,2,1,1,0,0,0,0,2,2,2,0,0,1,2,2v3a4,4,0,0,0,4,4,1,1,0,0,0,0-2,2,2,0,0,1-2-2V15a4,4,0,0,0-1.38-3A4,4,0,0,0,6,9Zm16,5a2,2,0,0,1-2-2V6a4,4,0,0,0-4-4,1,1,0,0,0,0,2,2,2,0,0,1,2,2V9a4,4,0,0,0,1.38,3A4,4,0,0,0,18,15v3a2,2,0,0,1-2,2,1,1,0,0,0,0,2,4,4,0,0,0,4-4V15a2,2,0,0,1,2-2,1,1,0,0,0,0-2Z"/>
</svg>
But its style is not changed when svg is added as external file:
img {
fill: skyblue;
}
/* etc. Not working
img > svg {
fill: skyblue;
}
*/
<img src="brackets.svg" width="500px" height="500px">
Or; Can I somehow use the css root variable in the svg file? e.g. <svg fill="var(--textColor)" > </svg>

You can use a <use> element instead.
Give your path element an unique id and strip all fill attributes:
Svg markup
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" >
<path id="icon"
d="M6,6A2,2,0,0,1,8,4,1,1,0,0,0,8,2,4,4,0,0,0,4,6V9a2,2,0,0,1-2,2,1,1,0,0,0,0,2,2,2,0,0,1,2,2v3a4,4,0,0,0,4,4,1,1,0,0,0,0-2,2,2,0,0,1-2-2V15a4,4,0,0,0-1.38-3A4,4,0,0,0,6,9Zm16,5a2,2,0,0,1-2-2V6a4,4,0,0,0-4-4,1,1,0,0,0,0,2,2,2,0,0,1,2,2V9a4,4,0,0,0,1.38,3A4,4,0,0,0,18,15v3a2,2,0,0,1-2,2,1,1,0,0,0,0,2,4,4,0,0,0,4-4V15a2,2,0,0,1,2-2,1,1,0,0,0,0-2Z" />
</svg>
Use element in html
Use elements support external svg files.
<svg>
<use href="icon.svg#icon" style="fill:red" />
</svg>
So you don't need to inline your assets/icons svg (some legacy browsers might still have issues with external svgs referenced in use)
Example (inlined svg just for circumventing CORS issues)
<svg style="display:none" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" >
<path id="icon"
d="M6,6A2,2,0,0,1,8,4,1,1,0,0,0,8,2,4,4,0,0,0,4,6V9a2,2,0,0,1-2,2,1,1,0,0,0,0,2,2,2,0,0,1,2,2v3a4,4,0,0,0,4,4,1,1,0,0,0,0-2,2,2,0,0,1-2-2V15a4,4,0,0,0-1.38-3A4,4,0,0,0,6,9Zm16,5a2,2,0,0,1-2-2V6a4,4,0,0,0-4-4,1,1,0,0,0,0,2,2,2,0,0,1,2,2V9a4,4,0,0,0,1.38,3A4,4,0,0,0,18,15v3a2,2,0,0,1-2,2,1,1,0,0,0,0,2,4,4,0,0,0,4-4V15a2,2,0,0,1,2-2,1,1,0,0,0,0-2Z" />
</svg>
<p>
<svg>
<use href="#icon" style="fill:red" />
</svg>
<svg>
<use href="#icon" style="fill:green" />
</svg>
</p>
Multiple icons
When using icons containing multiple elements (like in feather-icons library) I strongly recommend wrapping each icon definition in a <symbol>element.
This way you can have icons with different viewBox attributes:
button{
background:#999;
border:none;
font-size:2em;
border-radius:0.3em;
padding:0.3em;
color:#fff;
}
.icon-use{
display: inline-block;
width:1em;
height:1em;
font-size:1em;
color:inherit;
vertical-align:-0.1em;
}
.icon-green{
color:green
}
<button type='button'>
Download
<svg class="icon-use">
<use href="#icon-download" />
</svg>
</button>
<button type='button'>
Download .xls
<svg class="icon-use icon-green">
<use href="#icon-download" />
</svg>
</button>
<button type='button'>
Download .docx
<svg class="icon-use" style="color:blue">
<use href="#icon-arrow" />
</svg>
</button>
<svg style="display:none" xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-download" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</symbol>
<symbol id="icon-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</symbol>
</svg>

Div dissapears after I add script

I have been trying to create an auto refreshing clock on my page but after adding script to my file the div around the clock dissapears so it doesn't use the CSS I have added to the div. <div class="clock_item"> is the one that disapears.
If I close div.clock_item before div.clocktwo then it doesn't dissapear but I want div.clocktwo to stay inside div.clock_item.
Thanks for the help!
function loadlink() {
$('.clocktwo').load('<?php echo get_template_directory_uri(); ?>/melbourne.php', function() {
$(this).unwrap();
});
}
loadlink();
setInterval(function() {
loadlink()
}, 5000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clock_item">
<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 310 155" style="enable-background:new 0 0 310 155;" xml:space="preserve">
<path d="M64.9,44v102.6H36.5V44h-36V19.4h100.5V44H64.9z"/>
<path d="M105.3,146.7V19.4h28.4v101.9h54.2v25.3H105.3z"/>
<path d="M281.3,19.4h28.4v127.2h-28.4L220.6,67v79.7h-28.4V19.4h26.6l62.4,81.9V19.4z"/>
<path d="M0,154.9v-9.1h309.7v9.1H0z"/>
</svg> <!--// MEL LETTERS -->
<h3>
MELBOURNE
</h3>
<div class="clocktwo">
</div>
</div>

In your code you have use $(this).unwrap() so unwrap removes parent element from selected element that's the reason your outer element gets removed because your selector is inner div i.e : clocktwo and outer is clock_item . Instead use wrap method it will wrap html structure around each element in the set of matched elements . i.e :
$('.clocktwo').load('<?php echo get_template_directory_uri(); ?>/melbourne.php',function () {
$(this).wrap();
});

i think this can solve
don't write script in div tag
<div class="clock_item">
<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 310 155" style="enable-background:new 0 0 310 155;" xml:space="preserve">
<path d="M64.9,44v102.6H36.5V44h-36V19.4h100.5V44H64.9z"/>
<path d="M105.3,146.7V19.4h28.4v101.9h54.2v25.3H105.3z"/>
<path d="M281.3,19.4h28.4v127.2h-28.4L220.6,67v79.7h-28.4V19.4h26.6l62.4,81.9V19.4z"/>
<path d="M0,154.9v-9.1h309.7v9.1H0z"/>
</svg> // MEL LETTERS
<h3>
MELBOURNE
</h3>
<div class="clocktwo">
</div>
</div>
<script>
function loadlink(){
$('.clocktwo').load('<?php echo get_template_directory_uri(); ?>/melbourne.php',function () {
$(this).unwrap();
});
}
loadlink();
setInterval(function(){
loadlink()
}, 5000);
</script>

Displaying and changing an external SVG background image

I'm trying to display and an external image inside an svg and then change it on button click. I can't get the background to show nor can I get it to change.
here is my fiddle:
https://jsfiddle.net/bsp9601z/
<head><meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<div id="slider"></div>
<button onclick="go()">change background</button>
<g id="backgroundImage">
<image width="100%" height="100%" xlink:href="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg" /></g>
<svg width="792pt" height="612pt" viewBox="0 0 792 612" enable-background="new 0 0 792 612"
version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
</svg>
</svg>
function go(){
var im = document.getElementById('backgroundImage');
im.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'http://demo.elmanawy.info/moraco/layout1/assets/images/portfolio/8.jpg');
im.setAttributeNS('http://www.w3.org/1999/xlink','width', "100%");
im.setAttributeNS('http://www.w3.org/1999/xlink','height', "100%");
}

You are missing <svg> tags and selecting <g> rather than <image>
<button onclick="go()">change background</button>
<svg>
<g id="backgroundImage">
<image width="100%" height="100%" xlink:href="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg" />
</g>
</svg>
<script>
function go() {
var im = document.getElementById('backgroundImage').querySelector("image");
im.setAttributeNS('http://www.w3.org/1999/xlink'
, 'xlink:href'
, 'http://demo.elmanawy.info/moraco/layout1/assets/images/portfolio/8.jpg');
}
</script>

Click events stop working after replacing attribute of <use> element in <svg> (Win7/IE11)

We are using multiple svg symbols for displaying icons.
<!-- defining them at the start of the page -->
<div id="icon-container">
<svg xmlns="http://www.w3.org/2000/svg">
<symbol xmlns="http://www.w3.org/2000/svg"
id="rect" ...>
<rect... />
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg"
id="circle" ...>
<circle... />
</symbol>
</svg>
</div>
<!-- using them in the page somewhere -->
<svg>
<use xlink:href="#rect"></use>
</svg>
In some cases we need to replace them later on with another icon (like on a collapse control), therefore I created a little helper function to change the xlink:href to the new symbol name.
$.fn.replaceSVGIcon = function(id) {
$(this).find('svg')
.andSelf()
.filter('svg')
.find('use')
.attr('xlink:href', '#' + id);
}
This works in every browser except for IE10 + IE11 on Windows 7 (but weirdly enough it works with Windows 8).
When you open the snippet below in IE11 and click on the red box everything is fine, but as soon as you start clicking on the element within, it breaks the whole page after the icon is changed for the first time.
(function($){
$.fn.replaceSVGIcon = function(id) {
$(this).find('svg').andSelf().filter('svg').find('use').attr('xlink:href', '#' + id);
}
})(jQuery);
clickFunction = function() {
var $elem = $('#icon');
if ($elem.find('use').attr('xlink:href') == '#rect')
{
$elem.replaceSVGIcon('circle');
} else {
$elem.replaceSVGIcon('rect');
}
};
#icon-container {
visibility: collapse;
display: none;
}
#icon {
height: 40px;
width: 40px;
fill: #454545;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="icon-container">
<svg xmlns="http://www.w3.org/2000/svg">
<symbol xmlns="http://www.w3.org/2000/svg" id="rect" viewBox="0 0 50 50">
<rect x="15" y="15" width="20" height="20"></rect>
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" id="circle" viewBox="0 0 50 50">
<circle cx="25" cy="25" r="10"></circle>
</symbol>
</svg>
</div>
<svg id="icon" onclick="clickFunction()">
<rect fill="red" height="40" width="40"></rect>
<use xlink:href="#rect"></use>
</svg>
Why is this happening and is this a known Internet Explorer bug? What are my options to work around this issue?

Yes, this is a known IE bug. https://connect.microsoft.com/IE/feedback/details/796745/mouse-events-are-not-delivered-at-all-anymore-when-inside-an-svg-a-use-is-removed-from-the-dom
If you can, you should set pointer-events: none; for the use tag in your CSS. It's crazy, but it should work.

Develop Reference

JavaScript is the programming language of the Web.

How to place Javascript in SVG html box - javascript

Related

External SVG file in clippath

How to access style properties of externally insert svg file?

Div dissapears after I add script

Displaying and changing an external SVG background image

Click events stop working after replacing attribute of <use> element in <svg> (Win7/IE11)

Categories

Resources