When displaying some SVG icons within an SVG of a fixed width, they should be clipped to the width of that SVG container.
In all sensible browsers this works fine but in IE11 the icons extend beyond the width of the container.
Is there any workaround to counter this behaviour?
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<svg class="task" width="50">
<rect class="task-rectangle" fill="#FFE5E5" width="50" height="50"></rect>
<svg class="svgs-using-def-with-image-href" x="4" y="5">
<use href="#GreenTick" x="0"/>
<use href="#Triangle" x="18"/>
<use href="#Facebook" x="36"/>
</svg>
<svg class="reusable-icons" width="0" height="0">
<defs>
<svg id="GreenTick" width="18" height="18">
<image href="https://svgur.com/i/XvH.svg" width="18" height="18"/>
</svg>
<svg id="Triangle" width="18" height="18">
<image href="https://svgur.com/i/XwA.svg" width="18" height="18"/>
</svg>
<svg id="Facebook" width="18" height="18">
<image href="https://svgur.com/i/Xx8.svg" width="18" height="18"/>
</svg>
</defs>
</svg>
</svg>
</body>
</html>
IE11: Chrome:
IE9-11 & Edge don't properly scale SVG files. You can add height, width, viewBox and CSS rules as workarounds.
I tried the overflow CSS style mentioned, and it works fine. How do you test the code? The reason it doesn't work in your side may be related to the browser cache, please try to clear IE cache and test again.
Edit: I refer to the code you provide, and it has such a problem: If you use the <g> element, I think you also need to use clip CSS to achieve the same effect.
This is a simple sample:
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<svg class="resource-row" data-level="1" x="0" y="0" width="100%" height="576" overflow="hidden">
<g class="task" overflow="hidden" clip-path="url(#clip)">
<rect class="task-rectangle" fill="#FFE5E5" width="50" height="50"></rect>
<svg class="svgs-using-def-with-image-href" x="4" y="5" width="46" overflow="hidden">
<use href="#GreenTick" x="0" />
<use href="#Triangle" x="18" />
<use href="#Facebook" x="36" />
</svg>
</g>
</svg>
<svg class="reusable-icons" width="0" height="0">
<defs>
<rect class="task-rectangle" id="rect" width="50" height="50"></rect>
<clipPath id="clip">
<use xlink:href="#rect" />
</clipPath>
<svg id="GreenTick" width="18" height="18">
<image href="https://svgur.com/i/XvH.svg" width="18" height="18" />
</svg>
<svg id="Triangle" width="18" height="18">
<image href="https://svgur.com/i/XwA.svg" width="18" height="18" />
</svg>
<svg id="Facebook" width="18" height="18">
<image href="https://svgur.com/i/Xx8.svg" width="18" height="18" />
</svg>
</defs>
</svg>
</body>
</html>
Result in IE 11:
Related
<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>
I'm trying to pass parameters to the svg, but I'm not doing something wrong can you give me a hand?
Link: codesandbox
Html:
<object type="image/svg+xml" data="button.svg?color=yellow">
<param name="color" value="red" />
<param name="label" value="stop" />
</object>
Svg:
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 110 40"
width="100%"
height="100%">
<g>
<rect
id="button_rect"
x="5"
y="5"
width="100"
height="30"
rx="15"
ry="15"
fill="param(color) blue"
stroke="navy"
/>
<text id="button_label" x="55" y="30" text-anchor="middle"
font-size="25" fill="white" font-family="Verdana"
content-value="param(label)">
Ok
</text>
</g>
</svg>
The folks who have written the specs have noted that while this isn't implemented in the browser itself, you need to include a Javascript library. What they left out is where you should include it. Obviously your first thought might be to include it inside the html document but that's not the case - it needs to be included in the .svg file as:
<script type="text/ecmascript" xlink:href="https://dev.w3.org/SVG/modules/ref/master/ref2.js"></script>
Furthermore I'd recommend referencing the parameters using the url(#parameterName) syntax.
For example:
<html>
<head>
<title></title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<object type="image/svg+xml" data="button.svg?fill=red">
<param name="fill" value="blue" />
<param name="stroke" value="red" />
</object>
</body>
</html>
and button.svg:
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 110 40"
width="100%"
height="100%">
<defs>
<ref id="paramX" param="fill" default="red"/>
<ref id="paramY" param="stroke" default="blue"/>
</defs>
<g>
<rect
id="button_rect"
x="5"
y="5"
width="100"
height="30"
rx="15"
ry="15"
fill="url(#paramX)"
stroke="url(#paramY)"
/>
<text
id="button_label"
x="55"
y="30"
text-anchor="middle"
font-size="25"
fill="white"
font-family="Verdana" >
Go
</text>
</g>
<script type="text/ecmascript" xlink:href="https://dev.w3.org/SVG/modules/ref/master/ref2.js"></script>
</svg>
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.
my svg is just text over a circke with full screen rectangle
svg
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red"/>
<circle cx="150" cy="100" r="80" fill="green"/>
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">Hello SVG</text>
</svg>
When in img src it is arbitriraly truncated at the bottom why ? How to fix this ?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<img src="hello.svg" type="image/svg+xml">
</body>
</html>
Specify the width, height and viewPort attributes of svg.
<svg version="1.1" width="300" height="200" viewPort="0 0 300 200" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">Hello SVG</text>
</svg>
You have not specified any size for the <img> or <svg> so the browser is choosing the default size for indeterminate sized objects, which is 300x150. So your circle will get cut off at the bottom. The solution, as chipChocolate has already pointed out, is to give one or the other an appropriate size.
Who has an idea or a hint
I would like to embed a svg object inside die svg Tag and change this parameter
HTML/SVG (not going on)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
<svg width="2000" height="2000">
<object type="image/svg+xml" data="lamp.svg" style="width: 450px; height:150px;">
<param name="color" value="yellow" />
</object>
</svg>
</body>
</html>
SVG File lamp.svg:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="40" height="40">
<title>lamp</title>
<circle cx="30" cy="30" r="15" fill="param(color)" stroke-width=""/>
</svg>
With the IMAGE TAG no tag parameter passing is possible.
<image x="0" y="0" width="20" height="20" xlink:href="lamp.svg"><param name="color" value="yellow" /></image>
Currently browsers don't support passing parameters this way, though there's an SVG Parameters spec being developed by W3C. The examples in the spec use a script to emulate support for the feature.
Note: the shim param.js goes in the SVG file, not the html file:
e.g.,
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
width="68" height="68">
<rect x="10" y="10" height="48" width="48" stroke="black" stroke-width="1" fill="param(color) red">
</rect>
<rect x="29" y="0" height="10" width="10" fill="black"></rect>
<text x="24" y="46" fill="param(text) black" style="font-size:32px;"
content-value="param(number) 1">1</text>
<script type="text/ecmascript" xlink:href="param.js" />
</svg>