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.
Related
<div>
<div style="width:200px;height:70px">
<div style="width:100%;height:100%;">
<svg id="svg1" width="100%" height="90%">
<rect height="100%" width="100%" fill="#00001a"></rect>
<svg id="svg2" width="90%" height="10%" x="10%">
<rect height="100%" width="100%" fill="#ff4d4d"></rect>
</svg>
<svg id="svg3" width="90%" height="90%" x="10%" y="10%">
<rect height="100%" width="100%" fill="#ff4d4d"></rect>
<line x1="0%" x2="2700px" y1="25%" y2="25%" stroke="#aa001a"/>
</svg>
<svg id="svg4" width="10%" height="90%" y="10%">
<rect height="100%" width="100%" fill="#ff4d4d"></rect>
</svg>
</svg>
</div>
</div>
</div>
I have some svg's i want to set the size of relative to their parent svg. I have set the size properties using height%/width% inline, and this works perfectly in firefox. Here's a simplified example of the code-structure that is rendered in both chrome and firefox(identical as-read), this code works as expected in chrome if you just open it in an html file:
<div>
<div style="width:200px;height:70px">
<div style="width:100%;height:100%;">
<svg id="svg1" width="100%" height="90%">
<rect height="100%" width="100%" fill="#00001a"></rect>
<svg id="svg2" width="90%" height="10%" x="10%">
<rect height="100%" width="100%" fill="#ff4d4d"></rect>
</svg>
<svg id="svg3" width="90%" height="90%" x="10%" y="10%">
<rect height="100%" width="100%" fill="#ff4d4d"></rect>
</svg>
<svg id="svg4" width="10%" height="90%" y="10%">
<rect height="100%" width="100%" fill="#ff4d4d"></rect>
</svg>
</svg>
</div>
</div>
</div>
However, when i run my project in chrome and edge it respects #svg3's x and y values, but the size is set a lot bigger, even bigger than body. The rect inside svg3 works as expected(only filling the given % size). I found these two questions:
SVG translate seems to behave different in Chrome/Chromium
nested svg ignores transformation in Chrome and Opera
They refer to transformations, not setting size. The weird part is that the rect inside svg3 only fills the space given(as expected), but the size of the actual svg when you inspect it is a lot bigger. I am using vuejs, but since the code that is rendered in the browser is as expected, and it works as intended in firefox i believe the problem isn't with vuejs.
Any help/tips would be appreciated.
EDIT:
I maybe could have stated it better but the code above runs fine for me(in chrome as well). The structure of the code is the same as when i inspect the original code in chrome. Here is an album of images showing what i am seeing in my project. The first and the last images are probably most important because it shows the rect with 100% width and height being correctly sized but the last image shows that the svg element is larger than that area.
https://imgur.com/a/ozJqEgB
EDIT 2:
I was able to find out what was causing my issues, it was a pretty simple mistake on my part where i had svg elements that we're being written bigger than the svg itself. Here is a edited version of the last example:
<div>
<div style="width:200px;height:70px">
<div style="width:100%;height:100%;">
<svg id="svg1" width="100%" height="90%">
<rect height="100%" width="100%" fill="#00001a"></rect>
<svg id="svg2" width="90%" height="10%" x="10%">
<rect height="100%" width="100%" fill="#ff4d4d"></rect>
</svg>
<svg id="svg3" width="90%" height="90%" x="10%" y="10%">
<rect height="100%" width="100%" fill="#ff4d4d"></rect>
<line x1="0%" x2="500px" y1="25%" y2="25%" stroke="#236ce0" />
<line x1="50%" x2="50%" y1="0%" y2="500px" stroke="#236ce0" />
</svg>
<svg id="svg4" width="10%" height="90%" y="10%">
<rect height="100%" width="100%" fill="#ff4d4d"></rect>
</svg>
</svg>
</div>
</div>
</div>
If you open this code in chrome/edge svg3 is a 500px by 500px square, while in firefox it is 180px by 56,7px. Is this inconsistency expected? This is a problem if you wan't to have click events that are relative to the SVG, as the size and top/left margins aren't the same across browsers.
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 embed a video inside an svg (the svg will only ever be viewed on the web). For that, I'm using the foreignObject tag:
<svg version="1.1" class="center-block" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600"
style="border: 1px solid black;">
<g>
<g transform="translate(151,104) scale(1,1)">
<rect x="0" y="0" width="300" height="200"></rect>
<foreignObject x="0" y="0" width="300" height="200">
<video width="300" height="200" controls="" style="position: fixed; left: 151px; top: 104px;">
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
</foreignObject>
</g>
</g>
</svg>
It "works" in the sense that the video is displayed, but it's off by several pixels relative to its parent <g>. I tried several combinations: with style for the video, without styles, with namespaced video tag, etc. This works a lot better in firefox, but breaks completely in Chrome (Mac and Linux). I don't want to add an html tag outside the svg as this will be more hassle (the svg is created dynamically with React).
Has anyone been able to get something similar working?
There you go:
Translate moves the origin from the top left to the specified coordinates. If you embed an object at 0,0 it will be placed at the new origin. In this case you must embed it at -translation coordinates.
Even so, I had to increase the width and height. Why? I don't know. It doesn't seem to be a scale by 2. If someone knows I am curious to know.
<svg version="1.1" class="center-block" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600" style="border: 1px solid black;">
<g>
<g transform="translate(151,104) scale(1,1)">
<rect x="0" y="0" width="300" height="200"></rect>
<foreignObject x="-151" y="-104" width="500" height="400">
<video xmlns="http://www.w3.org/1999/xhtml" width="300" height="200" controls="" style="position: fixed; left: 151px; top: 104px;">
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4" />
</video>
</foreignObject>
</g>
</g>
</svg>
My goal is to cut out a rectangular area of a photo using an svg mask in html5. I have attempted to implement this using the code below and in this fiddle, to no avail. Can anyone tell me what I'm doing wrong?
html:
<body>
<svg id="svg-rect" width="50px" height="50px">
<defs>
<mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<rect width="100%" height="100%" />
</mask>
</defs>
</svg>
<!--<svg id="svg-rect" width="50px" height="50px">
<rect width="100%" height="100%" />
</svg>-->
<img src="https://scontent-a.xx.fbcdn.net/hphotos-prn1/t1.0-9/p235x165/75938_10152243783285987_398136218_n.jpg"/>
</body>
css:
img {
mask: url(#masking);
position:absolute;
top:0px;
left:0px;
}
#svg-rect{
position:absolute;
top:50px;
left:60px;
z-index:2;
}
Applying SVG effects to HTML only works in Firefox. You have to use -webkit-mask in Chrome/Safari and that's been deprecated. Next, you have to fill your rectangle with a color for the mask to take effect. And there is a bug in firefox, where you have to specify the x/y offset for a rect in a mask in decimal form, %'s won't work. Change your rect definition to:
<rect x=".2" y=".2" width=".25" height=".25" fill="white" />
And you'll see a mask effect (in Firefox only)
or... to invert the mask, use an empty fill and a solid stroke
<rect x="0" y="0" width="1" height="1" stroke="white" stroke-width=".4" />
The best way to do this for maximum compatibility, however, is to use inline SVG all the way, and just do your image content in SVG using the SVG image tag.
Elaborating on Michaels' last point, here's how you would do it in a pure SVG way.
<svg width="235" height="314" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="masking">
<rect width="100%" height="100%" fill="white" />
<rect x="60px" y="50px" width="50px" height="50px" fill="black" />
</mask>
</defs>
<image width="235" height="314"
mask="url(#masking)"
xlink:href="https://scontent-a.xx.fbcdn.net/hphotos-prn1/t1.0-9/p235x165/75938_10152243783285987_398136218_n.jpg" />
</svg>
Fiddle here
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