I am having an issue with Chrome and foreignObject were i would like to put this inside a SVG Element that is a child to another SVG element, for some reason chrome doesn't seem to like this. Am i missing something in my syntax or is it time file a bug repport?
Example:
<svg width="400" height="600" xmlns="http://www.w3.org/2000/svg" version="1.1">
<foreignObject x="0" y="0" width="400" height="200" overflow="hidden" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="pointer-events: all;">
<div contenteditable="true" xmlns="http://www.w3.org/1999/xhtml" style="background: black; color: white;">
<div>This works!</div>
</div>
<textarea>Here we can select text</textarea>
</foreignObject>
<svg x="0" y="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
<foreignObject x="0" y="0" width="400" height="200" overflow="hidden" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="pointer-events: all;">
<div contenteditable="true" xmlns="http://www.w3.org/1999/xhtml" style="background: black; color: white;">
<div>But this does not in chrome, why not?</div>
</div>
<textarea>Unable to select text, but it's posible to edit</textarea>
</foreignObject>
</svg>
</svg>
JSFiddle example
Related
Why foreignObject does not appear in below situation?
Is that because "use" tag can not work for foreignObject element?
<div>
<svg id="test" width="200" height="100">
<circle cx="150" cy="50" r="50" fill="red" />
<foreignObject id="fo" style="width:100px; height: 100px">
<div style="width: 100px; height: 100px; background-color: grey">
asdf
</div>
</foreignObject>
</svg>
<svg width="200" height="100">
<use href="#test"></use>
</svg>
</div>
<div>
<svg id="svg_viewport"
width="800" height="800"
style="background-color: pink"
>
<svg id="o_1"
x="10" y="10" width="200" height="200"
>
<image href="https://www.1kfa.com/table/img/image.png"
height="200" width="200"></image>
</svg>
<svg id="o_2"
x="0" y="100" width="100" height="100"
>
<rect id="r_2"
width="100" height="100"
fill="green"
></rect>
</svg>
</svg>
</div>
This works in Chromium, but in Firefox, the green rect gets cut off. It's like the browser is rendering it "inside" the image of svg o_1.
Has anyone faced this before? Workarounds?
I think I've found a workaround.
By adding a viewBox, Firefox decides to render it properly. See line 8:
<div>
<svg id="svg_viewport"
width="800" height="800"
style="background-color: pink"
>
<svg id="o_1"
x="10" y="10" width="200" height="200"
viewBox="0 0 200 200"
>
<image href="https://www.1kfa.com/table/img/image.png"
height="200" width="200"></image>
</svg>
<svg id="o_2"
x="0" y="100" width="100" height="100"
>
<rect id="r_2"
width="100" height="100"
fill="green"
></rect>
</svg>
</svg>
</div>
The goal is to show image but with another color inside svg.
I tried -webkit-mask-image with background-color, but this combination does not work in svg. Here is the example:
<div class="dashboard-buttons">
<svg width="367" height="243.5" viewBox="252.5 60.5 367 243.5">
<g>
<rect width="46" height="46" rx="4" ry="4" transform="translate(-23, -23)" style="fill:white" x="560" y="224"></rect>
<a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#element3" href="#element3" onclick="window.location.href = '#element3';">
<image height="32" width="32" transform="translate(-16, -16)" x="560" y="224" style="background-color: Red; -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAACqSURBVFhH7ZYhDsJAFESHBMkBOCYGyQV6BQ6BQ0EwWByiuwj0Fk5AgO00+XJpCd20gpnkqfZnXrJmoCiVx+rmcWyD/2zCGXM7yZvK4c2S2InDiRIzO8uXZNkHgsM2HjC10zxJFXWwjsDEzvsnUfANVz7JpS93j+JXgSyEEs9RBRokIAEJSEACEpDA+AIcpa/UhyHg2n6A02jJabSjyH5Qms4SC1uGyt8GqAEZtGBDEZcerAAAAABJRU5ErkJggg==');width: 32px; height: 32px;"></image>
</a>
<a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#element3"><text filter="url(#fillbackground)" x="560" y="257">out</text></a>
</g>
</svg>
</div>
If you remove svg tags from it then this sample works and the color changed.
Do you know how to change image color inside svg correctly?
EDIT:
The following code works in Chrome, but not in Firefox:
<div class="wrapper">
<svg width="200" height="300" class="svg">
<defs>
<mask id="mask">
<image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAACqSURBVFhH7ZYhDsJAFESHBMkBOCYGyQV6BQ6BQ0EwWByiuwj0Fk5AgO00+XJpCd20gpnkqfZnXrJmoCiVx+rmcWyD/2zCGXM7yZvK4c2S2InDiRIzO8uXZNkHgsM2HjC10zxJFXWwjsDEzvsnUfANVz7JpS93j+JXgSyEEs9RBRokIAEJSEACEpDA+AIcpa/UhyHg2n6A02jJabSjyH5Qms4SC1uGyt8GqAEZtGBDEZcerAAAAABJRU5ErkJggg==">
</image>
</mask>
</defs>
<rect width="50" height="50" style="fill:blue;" x="0" y="0"
mask="url(#mask)"></rect>
</svg>
</div>
Can't see your example, but:
<rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple"
fill-opacity="0.5" stroke-opacity="0.8"/>
Use the fill option!
EDIT:
Now I can see your code.
If you insert an image as PNG:
data:image/png
Then I doubt you can change the color with HTML directive. PNG are bitmaps and not SVG, you would have to edit the PNG itself to achieve that.
I'm trying to get svg image to scale nicely (http://coub.com/view/5tbis) with sibling div content so that they'd look like one thing. I managed to get it working in fireforx but not in chrome and ie, all latest versions. Here is my code:
<!DOCTYPE html>
<html>
<body>
<div style="display: flex; height: 10em;">
<div style="height: 100%">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 100%; height: 100%; " viewBox="0 0 400 400">
<rect x="0" y="0" width="400" height="200" fill="yellow" stroke="black" />
<rect x="0" y="200" width="400" height="200" fill="green" stroke="black" />
<circle cx="200" cy="200" r="100" stroke="black" stroke-width="3" fill="red" />
</svg>
</div>
<div style="display: flex; flex-direction: column; width: 100%">
<div style="flex: 1; background-color: green"> </div>
<div style="flex: 1; background-color: yellow"> </div>
</div>
</div>
</body>
</html>
In IE and Chrome there is a blank space around svg and in Chome, svg proportions does not always match divs' ones.
Any help is highly appreciated.
UPDATE: ok, preserveAspectRatio="none" fixes the problem for ie and chrome, but I still don't understand why do they behave in this way? The wrapper div do not have width, why svg then doesn't change it according its own width?
UPDATE: preserveAspectRatio="xMidYMid slice" makes it even better, but only for ff and ie
This is the code below am I not seeing something to get it up and running?
<svg base="http://www.w3.org/2000/svg" x="550" y="475" style="border: 3px solid blue;">
<image xlink:href="app3.JPG" x="100" y="75" width="300" height="167" id="image1" />
</svg>
There's no such attribute as base you want xmlns instead there. You've no defined xlink namespace either.
If you're embedding SVG in html you should specify a width and height for the <svg> element too. 100% is probably what you want.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="550" y="475" width="100%" height="100%" style="border: 3px solid blue;">
<image xlink:href="app3.JPG" x="100" y="75" width="300" height="167" id="image1" />
</svg>
You may also need to specify a width/height for the div as a style.