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>
SVG path element not working in Firefox and Safari but it works in Chrome.
Why doesn't the path filled using pattern in Firefox and Safari?
<svg id="" xmlns="http://www.w3.org/2000/svg" height="500" width="600" style="position: absolute;">
<defs>
<pattern id="imgpattern" x="0" y="0" width="1" height="1" patternUnits="userSpaceOnUse">
<image width="600" xlink:href="https://i.pinimg.com/564x/e1/a5/b7/e1a5b7edacee456a4f3bc3e00c3c01d9.jpg"></image>
</pattern>
</defs>
<path d="M50,100 C50,100 100,100 100,50 L100,50 500,50 C500,50 500,100 550,100 L550,100 550,400 C550,400 500,400 500,450 L500,450 100,450 C100,450 100,400 50,400 L50,400 50,100 L50,100 0,100 0,0 0,425 L0,425 50,425 C50,425 75,425 75,450 L50,450 50,425 0,425 0,500 525,500 525,450 C525,450 525,425 550,425 L550,425 550,450 525,450 525,500 600,500 600,75 550,75 C550,75 525,75 525,50 L525,50 550,50 550,75 600,75 600,0 75,0 75,50 C75,50 75,75 50,75 L50,50 75,50 75,0 0,0 0,100" fill="#ff0000;" stroke="#F000" stroke-width="1px" style="fill:url(#imgpattern)"></path>
</svg>
There is no height attribute on the image. SVG 2 allows width/height to be omitted but only Blink has implemented this part of SVG 2 so far.
You also have a redundant fill on the rect (as you're applying a pattern fill as a style)
<svg id="" xmlns="http://www.w3.org/2000/svg" height="500" width="600" style="position: absolute;">
<defs>
<pattern id="imgpattern" x="0" y="0" width="1" height="1" patternUnits="userspaceOnUse">
<image width="600" height="600" xlink:href="https://i.pinimg.com/564x/e1/a5/b7/e1a5b7edacee456a4f3bc3e00c3c01d9.jpg"></image>
</pattern>
</defs>
<path d="M50,100 C50,100 100,100 100,50 L100,50 500,50 C500,50 500,100 550,100 L550,100 550,400 C550,400 500,400 500,450 L500,450 100,450 C100,450 100,400 50,400 L50,400 50,100 L50,100 0,100 0,0 0,425 L0,425 50,425 C50,425 75,425 75,450 L50,450 50,425 0,425 0,500 525,500 525,450 C525,450 525,425 550,425 L550,425 550,450 525,450 525,500 600,500 600,75 550,75 C550,75 525,75 525,50 L525,50 550,50 550,75 600,75 600,0 75,0 75,50 C75,50 75,75 50,75 L50,50 75,50 75,0 0,0 0,100" stroke="#F000" stroke-width="1px" style="fill:url(#imgpattern)"></path>
</svg>
I use saveSvgAsPng to get svg`s dataUri. Then I converted the dataUri to .svg by Java.The original picture had foreginObject tag.When I save it to .svg,and open it with chrome,the foreignObject tag do not show.This is my .svg tag
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1477" height="1033" class=".save" style="-webkit-tap-highlight-color:rgba(0,0,0,0)" id="saveImg" viewBox="-201.48349917081265 -185.1995003306789 1477 1033" preserveASpecRatio="none" version="1.1">
<g>
<g class="textGroup">
<text>This is test</text>
</g>
<g>
<foreignObject x="200" y="50" width="200" height="200">
<div>
<p style="color:rgb(0,0,0)">this is P</p>
</div>
</foreignObject>
</g>
</g>
</svg>
As you know,Directly with chrome open. svg do not have <html>and <body>
I have to use CKEditor to allow users to edit some HTLM pages that may include SVG images. And the links defined in those SVG images contain some attribute like xlink:href. E.g:
<svg preserveaspectratio="xMinYMin meet" version="1.1" viewbox="0 0 778 873" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="100%" width="100%" xlink:href="map.png"></image>
<g class="hover_group" opacity="1">
<a xlink:href="http://www.google.com">
<rect fill="red" height="100" opacity="0.0" width="160" x="110" y="240"></rect>
</a>
</g>
</svg>
I already set CKEDITOR.config.allowedContent = true with hope that all tags and attributes will be retained by the editor.
However, when I switch back and forth between WYSIWYG and HTML mode, I notice that the A tag become like this:
a href="http://www.google.com" xlink:=""
<svg preserveaspectratio="xMinYMin meet" version="1.1" viewbox="0 0 778 873" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="100%" width="100%" xlink:href="map.png"></image>
<g class="hover_group" opacity="1">
<a href="http://www.google.com" xlink:="">
<rect fill="red" height="100" opacity="0.0" width="160" x="110" y="240"></rect>
</a>
</g>
</svg>
This behavior only happens to the A tag, not the IMAGE tag.
Of course, this makes the link in SVG file no longer work.
Anyone know how to fix this? Thanks. I don't want to manually allow all the allowed tags or attributes because this may be so much work.
It is a bug (called also "lack of feature") in CKEditor. It's not able to process attributes ending with ":href" properly.
I reported http://dev.ckeditor.com/ticket/13233 which also includes a possible patch. If it's correct, then this issue will be fixed in the next minor release.
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.