i'm making a markdown file in which is present an SVG.
Inside this SVG i wanna include an image, but it doesn't work.
Whenever i remove the image, it works fine.
You got any idea? Thank you so much in advance!
This is the svg code:
<svg fill="none" viewBox="0 0 508 125" width="800" height="200" xmlns="http://www.w3.org/2000/svg">
<foreignObject width="100%" height="100%">
<div xmlns="http://www.w3.org/1999/xhtml">
<div class="dialogue-card" id="dialogue-box">
<image xlink:href="https://github.com/Goth-Rei-Codes/goth-rei-codes/blob/main/Images/propic.png" />
<div class="propic-container">
<div class="name-container">
<div class="dialogue-text">
<p>Welcome to my profile!</p>
</div>
<div class="arrow-down" id="next-dialogue"></div>
</div>
</div>
</div>
</div>
</foreignObject></svg>
Related
I made an Interactive Workflow using SVG. Made this out of Adobe XD and transformed it to a working workflow where each button opens a pop-up modal and showing a video (like a lightbox).
The problem I encounter is that the buttons don't work using Safari. Using Google Chrome or Firefox does work. What can I do to make this work for Safari as well?
You can see an example of the interactive workflow via Fiddle.
To reproduce the problem you should open the link in Safari. If you want to see how it should work you should use Chrome or Firefox
-- EDIT 25-03-19 --
Thanks for the help but the answers did not work. Xlink:herf is kinda old and doesn't work for Safari. Maybe it does for regular links but i couldn't make my modal pop-up work.
I found a working example for the problem i was facing at http://jsbin.com/lajilacajumu/1/edit?html,css,output
Also made a preview with the information i saw in the example.
.hoverable-rect {
cursor:pointer
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Bug Report</title>
<!-- Bootstrap's CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<!-- the different buttons comes here -->
<div class="container">
<svg viewBox="0 0 1920 1080">
<g class="hoverable-rect" data-toggle="modal" data-target="#modal1" id="g3223" id="prime-ppd" transform="translate(175.776 781.062)">
<g id="prime-elements">
<rect id="prime-bg" width="50" height="50" x="0" y="0" fill="#0094db"/>
<text id="PRIME" transform="translate(4.65 26.098)" fill="#fff" font-size="11" font-family="HelveticaNeue-Medium, Helvetica Neue" font-weight="500" letter-spacing="-0.002em"><tspan x="0" y="0">PRIME</tspan></text>
</g>
</g>
</svg>
<!-- all different modals comes here -->
<div class="modal fade overlay" id="modal1" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<iframe src="https://player.vimeo.com/video/303329059?autoplay=1&loop=1&autopause=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- jQuery and Bootstrap's JavaScript-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.js"></script>
</html>
Instead of
<a href="whatever">
try
<a xlink:href="whatever">
SVG <a> elements are not the same as HTML <a> elements. In the SVG version you link using xlink:href.
This requirement for the xlink: prefix has been dropped in SVG 2. But not all browsers have implemented that yet.
How to use image-map on jssor. its not working, the link disappears. I have tried the given code.
<div id="jssor_4" style="position:relative;margin:0 auto;top:0px;left:0px;width:1500px;height:300px;overflow:hidden;visibility:hidden;">
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1500px;height:300px;overflow:hidden;">
<div>
<img data-u="image" src="/images/banner-animasi1.jpg" usemap="#image-map1" style="width:100%" />
</div>
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb108" style="position:absolute;bottom:0px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
<div data-u="prototype" class="i" style="width:16px;height:16px;">
<svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<circle class="b" cx="8000" cy="8000" r="5800"></circle>
</svg>
</div>
</div>
</div>
</div>
<map name="image-map1">
<area target="_self" alt="Tentang kami" title="Tentang kami" href="/about" coords="2666,758,3540,922" shape="rect">
</map>
Any suggestion or help will be appreciated. Thanks
i use innerHTML to add svg element,it works fine in chrome but in firefox it can not display; thanks so much for any ansower
<!DOCTYPE html>
<html>
<head>
<title>SVGInnerHTML demo</title>
<meta charset="utf-8" />
<script src="svginnerhtml.js"></script>
<script>
alter = function () {
var svg = document.getElementById('container');
svg.innerHTML = '<rect width="100" height="60" fill="green" />'
+ '<circle cx="10" cy="19" r="20" fill="blue"></circle>'
+ '<text x="15" y="20" fill="white">hello world</text>'
+ '<g transform="translate(0, 70)"><rect width="100" height="20" fill="yellow" /></g>';
}
</script>
</head>
<body>
<svg id="container" width="100px" height="100px" http://www.w3.org/2000/svg>
</svg>
<p>
<button onclick="alter()">set .innerHTML</button>
<button onclick="alert(document.getElementById('container').innerHTML)">get .innerHTML</button>
</p>
</body>
</html>
A workaround is to add the innerHTML code as HTML, and not SVG. You can do that simply by using a <div> (instead of <svg>) in your HTML code as the placeholder, and insert the full SVG via innerHTML.
Replace:
<svg id="container" width="100px" height="100px">
</svg>
with
<div id="container" style="width: 100px; height: 100px">
</div>
And wrap your innerHTML string within an <svg> element:
var svg = document.getElementById('container');
svg.innerHTML = '<svg><rect width="100" height="60" fill="green" />'
+ '<circle cx="10" cy="19" r="20" fill="blue"></circle>'
+ '<text x="15" y="20" fill="white">hello world</text>'
+ '<g transform="translate(0, 70)">'
+ '<rect width="100" height="20" fill="yellow" /></g></svg>';
This should work in both Chrome and Firefox. Here's a JSFiddle.
I've done this a million times but I can't figure out why this won't work now. I'm trying to get 4 images of the same size to sit in a straight line horizontally however they are appearing slightly diagonal from each other.
Here is my html
<div class="homepage_images">
<img src="http://one-event.org.uk/wp-content/uploads/2013/12/CHILDREN.jpg" alt="" width="300" height="228" class="alignnone size-full wp-image-182" />
<img src="http://one-event.org.uk/wp-content/uploads/2013/12/ACTIVITIES-COVER.jpg" alt="ONE 2014 WEBSITE REV2" width="300" height="228" class="alignnone size-full wp-image-181" />
<img src="http://one-event.org.uk/wp-content/uploads/2013/12/STREAMS-COVER.jpg" alt="ONE 2014 WEBSITE REV2" width="300" height="228" class="alignnone size-full wp-image-184" />
<img src="http://one-event.org.uk/wp-content/uploads/2013/12/SPEAKERS-COVER.jpg" alt="ONE 2014 WEBSITE REV2" width="300" height="228" class="alignnone size-full wp-image-183" />
</div>
And my CSS:
.homepage_images {
display:block;
}
.homepage_images img{
display:inline-block;
float:left;
width:240px;
opacity:0.8;
}
And here is a link to the site, the images that are misaligned are near the bottom of the page
http://www.one-event.org.uk
You have a line break between each line. You haven't put it in the code you posted, but in the code from the site,
<div class="homepage_images">
<a href="http://one-event.org.uk/the-event/activities/for-18s-under/">
<img class="alignnone size-full wp-image-182" width="300" alt="ONE 2014 WEBSITE REV2" src="http://one-event.org.uk/wp-content/uploads/2013/12/CHILDREN.jpg">
</a>
<br>
<a href="http://one-event.org.uk/the-event/activities/">
<br>
<a href="http://one-event.org.uk/the-event/streams/">
<br>
<a href="http://one-event.org.uk/the-event/speakers/">
</div>
you have a line break between each div. Removing that fixes the problem.
Basically change it to what you posted;
<div class="homepage_images">
<img width="300" class="alignnone size-full wp-image-182" alt="ONE 2014 WEBSITE REV2" src="http://one-event.org.uk/wp-content/uploads/2013/12/CHILDREN.jpg">
<img width="300" class="alignnone size-full wp-image-181" alt="ONE 2014 WEBSITE REV2" src="http://one-event.org.uk/wp-content/uploads/2013/12/ACTIVITIES-COVER.jpg">
<img width="300" class="alignnone size-full wp-image-184" alt="ONE 2014 WEBSITE REV2" src="http://one-event.org.uk/wp-content/uploads/2013/12/STREAMS-COVER.jpg">
<img width="300" class="alignnone size-full wp-image-183" alt="ONE 2014 WEBSITE REV2" src="http://one-event.org.uk/wp-content/uploads/2013/12/SPEAKERS-COVER.jpg">
</div>
Somehow br tag added after each anchor tag in that div. just check from where that tag is getting added and make necessary changes.
i am tying to solve this problem that is very annoying....
a simple structured html, with an svg element with the width and height of 700px:
<div id="wrapper">
<div id="gameZone">
<div id="background">
<svg id="svgRoot" width="700px" height="700px">
<circle cx="355" cy="600" r="10" id="ball" />
<rect id="pad" height="15px" width="150px" x="280" y="670" rx="10" ry="20"/>
</svg>
</div>
</div>
</div>
the question is why the hell the svg is displyed without the width and height in firefox?
in chrome and ie its working 100%;
please help me solve this problem.
here is an screenshot of the problem: http://shaharmesh.hostingsiteforfree.com/differance.jpg
Firefox debugger show the size as same as the result by svgRoot.getBBox(), the actual svg content bounding size.
To avoid the problem, place a invisible rect which has the same size as the canvas, or other shapes to take up the top-left and bottom-right corners of the svg.
<div id="wrapper">
<div id="gameZone">
<div id="background">
<svg id="svgRoot" width="700" height="700">
<rect width="100%" height="100%" stroke="none" visibility="hidden" pointer-events="none" />
<circle cx="355" cy="600" r="10" id="ball" />
<rect id="pad" height="15" width="150" x="280" y="670" rx="10" ry="20"/>
</svg>
</div>
</div>
</div>