I'm having some trouble with a svg image that has a number in the middle. It shows correct when using Chrome and other browsers but in Firefox and Edge the number gets wrong position.
Link
Here is my code.
#maindiv {
position: relative;
width: 50px;
height: 50px;
}
.number {
font-family: initial;
font-size: 2.5em;
font-weight: 700;
text-align: center;
}
<div id="maindiv" class="" style="">
<svg viewBox="0 -10 50 90" enable-background="new 0 0 50 50">
<defs>
<!-- Background image for the svg -->
<pattern id="image_594121ec06330" patternUnits="userSpaceOnUse" height="50" width="50" x="0" y="20">
<image x="0" y="0" height="50" width="50" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://via.placeholder.com/50x50">
</image>
</pattern>
<!-- two colors for the number -->
<linearGradient id="textcolor_594121ec06343" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="50%" stop-color="#ff0100"></stop>
<stop offset="50%" stop-color="#0600c4"></stop>
<stop offset="50%" stop-color="#0600c4"></stop>
<stop offset="0" stop-color="#0600c4"></stop>
</linearGradient>
</defs>
<rect class="cellImage" id="top" x="0" y="20" width="50" height="50" style="" fill="url(#image_594121ec06330)"></rect>
<text class="number " x="50%" y="55%" alignment-baseline="middle" text-anchor="middle" fill="url(#textcolor_594121ec06343)">0</text>
</svg>
And here is the same code on jsfiddle
https://jsfiddle.net/41s39p63/
I know this can be fixed by making some if-conditions that changes some svg attributes to place the number in the middle, if the user is on Firefox or Edge but I prefer not to use that solution.
Is there anyone out there who can help me with a solution to this issue so it works on all browsers?
Firefox does not support alignment-baseline. You should be able to use dominant-baseline instead to get the same effect.
Related
I hope to find solution here.
I'm using laravel 5.6 and laravel charts from:
https://github.com/ConsoleTVs/Charts
My problem is :
I created a chart with data from database from a controller and I show it in a view and it works fine.
Now I wanted to show this chart into another view, so I decided to put the variable which contains the chart in a View composer after creating composer service provider.
When I put in simple data then it is rendered perfectly but when I put the chart variable it is not rendered as a graphic chart but as a code with tags.
This is the code rendered :
<canvas style="display: none;" id="tfypgmkjwulqasnhcxbdozive" height='400' ></canvas>
<div id="tfypgmkjwulqasnhcxbdozive_loader" style=" display: flex; justify-content: center; opacity: 1; align-items: center; height: 400px; ">
<svg width="50" height="50" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
<stop stop-color="#22292F" stop-opacity="0" offset="0%"/>
<stop stop-color="#22292F" stop-opacity=".631" offset="63.146%"/>
<stop stop-color="#22292F" offset="100%"/>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<g transform="translate(1 1)">
<path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2">
<animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite" />
</path>
<circle fill="#22292F" cx="36" cy="18" r="1">
<animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite" />
</circle>
</g>
</g>
</svg>
</div>
I'm struggling these days but in vain thank u for help in advance.
you sure view composer working?
check it using dd() in view file
I am using D3.js to draw bubble graph.
I want to add shadow effect at the top of SVG circle.
But when I use filter to add shadow then shadow is added to all the sides.
How can I just have it at the top like:
Expected:
Current:
Here is the html file code:
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<style>
.inner-point{
width: 20px;
height: 10px;
background: white;
}
.header{
//margin-top:100px;
}
#left,#right{
border:2px solid #78A9A9;
}
#right{
border-left: none;
}
.head-top{
color:#78A9A9;
}
.right{
text-align: center;
margin-right: -17px;
width: 460px;
}
.text-center{
text-align: center;
padding-right: 0px;
padding-left: 0px;
}
.link{
position: relative;
margin: 396px;
bottom: 0px;
color:#A37512;
}
.left-circle,.right-circle{
padding-left: 0px;
padding-right: 0px;
}
</style>
</head>
<body cz-shortcut-listen="true">
<div class="header">
<div class="left-circle col-sm-5">
<svg id="left" width="458" height="500">
<defs>
<linearGradient id="gradient1" x1="65%" y1="100%" x2="54%" y2="44%" spreadMethod="pad">
<stop offset="0%" stop-color="#0365C0" stop-opacity="1"></stop>
<stop offset="100%" stop-color="#51A7F9" stop-opacity="1"></stop>
</linearGradient>
</defs>
<defs>
<linearGradient id="gradient2" x1="65%" y1="100%" x2="54%" y2="44%" spreadMethod="pad">
<stop offset="0%" stop-color="#773F9B" stop-opacity="1"></stop>
<stop offset="100%" stop-color="#885CB2" stop-opacity="1"></stop>
</linearGradient>
</defs>
<defs>
<filter id="drop-shadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"></feGaussianBlur>
<feOffset in="blur" dx="0" dy="0" result="offsetBlur"></feOffset>
<feMerge><feMergeNode in="offsetBlur"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge></filter>
</defs>
<g class="node" transform="translate(197.1414719461316,229)">
<circle class="shadowed" id="Provider25S1511" r="131.42764796408775" onclick="demo('Provider25S151','Amount of Spend $49979.62',1,262.14147194613156,327);" stroke="#0365C0" stroke-width="1" style="filter: url("#drop-shadow"); fill: url("#gradient1");"></circle>
<clipPath id="clip-Provider25S151"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Provider25S151">
</use></clipPath>
</g>
</svg>
</div>
</div>
</body></html>
In the <feOffset> element in the filter, make the dy value negative by a little to move the shadow up a bit. Negative values move it up, positive values move it down.
So change
<feOffset in="blur" dx="0" dy="0" result="offsetBlur"></feOffset>
to (for example)
<feOffset in="blur" dx="0" dy="-4" result="offsetBlur"></feOffset>
<svg id="left" width="458" height="500">
<defs>
<linearGradient id="gradient1" x1="65%" y1="100%" x2="54%" y2="44%" spreadMethod="pad">
<stop offset="0%" stop-color="#0365C0" stop-opacity="1"></stop>
<stop offset="100%" stop-color="#51A7F9" stop-opacity="1"></stop>
</linearGradient>
</defs>
<defs>
<linearGradient id="gradient2" x1="65%" y1="100%" x2="54%" y2="44%" spreadMethod="pad">
<stop offset="0%" stop-color="#773F9B" stop-opacity="1"></stop>
<stop offset="100%" stop-color="#885CB2" stop-opacity="1"></stop>
</linearGradient>
</defs>
<defs>
<filter id="drop-shadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"></feGaussianBlur>
<feOffset in="blur" dx="0" dy="-4" result="offsetBlur"></feOffset>
<feMerge><feMergeNode in="offsetBlur"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge></filter>
</defs>
<g class="node" transform="translate(197.1414719461316,229)">
<circle class="shadowed" id="Provider25S1511" r="131.42764796408775" onclick="demo('Provider25S151','Amount of Spend $49979.62',1,262.14147194613156,327);" stroke="#0365C0" stroke-width="1" style="filter: url("#drop-shadow"); fill: url("#gradient1");"></circle>
<clipPath id="clip-Provider25S151"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Provider25S151">
</use></clipPath>
</g>
</svg>
I am trying to create a resizable SVG shape, with a 'glow' effect when it is selected using a gaussian filter. When I try to apply the filter as below, in Firefox (tried on v39+), the filter seems to cause the rectangle to be clipped at the bottom as soon as the height of the SVG element is > about 490. This doesn't happen in chrome though. If the filter is removed, the rectangle is not clipped.
I've mucked around for hours trying various combinations for the filter effect region parameters, but can't seem to find anything that works for arbitrary sizes of the SVG element. Putting the filter on the g element seems to work, but here are going to be other children that I don't want the filter to apply to.
What am I missing and how can I make this work?
Thanks,
Dave
<html>
<body>
<div style = "width: 100%; height: 100%">
<svg style = "width: 100%; height: 100%">
<defs>
<symbol id="rectangle">
<polygon vector-effect="non-scaling-stroke" points="3,3 103,3 103,53 3,53"></polygon>
</symbol>
</defs>
<filter id="nodeGlow" width="100" height="100">
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<g>
<svg style="fill: rgb(0, 251, 255);
stroke: rgb(30, 30, 30);
stroke-width : 1.5px;
filter: url("#nodeGlow");"
y="0" x="0"
height="500" width="200"
class="node" preserveAspectRatio="none"
viewBox="0 0 106 56">
<use xlink:href="#rectangle"></use>
</svg>
</g>
</svg>
</div>
</html>
</body>
Update: Robert's suggestion to add another <g> element did the trick, although I put it around the <svg> element rather than the <use> element because the blur effect looked poor when scaled up if it was around the <use>. I didn't add it to the existing <g>, cause there will be other children of that one that shouldn't have the filter.
Wrap the use in a <g> element and put the filter on that, or put the filter directly on the <use> element.
html, body, div {
width: 100%;
height: 100%;
}
<div>
<svg width="100%" height="100%">
<defs>
<symbol id="rectangle">
<polygon vector-effect="non-scaling-stroke" points="3,3 103,3 103,53 3,53"></polygon>
</symbol>
</defs>
<filter id="nodeGlow" width="100" height="100">
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<g>
<svg style="fill: rgb(0, 251, 255);
stroke: rgb(30, 30, 30);
stroke-width : 1.5px;"
height="500" width="200"
class="node" preserveAspectRatio="none"
viewBox="0 0 106 56">
<g style="filter: url(#nodeGlow);">
<use xlink:href="#rectangle"></use>
</g>
</svg>
</g>
</svg>
</div>
Putting the filter on something that has a viewBox is unlikely to work as the viewBox changes the co-ordinate system of its children but it doesn't change the element's co-ordinate system. Firefox is actually working properly.
I've replicated this effect using mask and filter.
This is what I've done:
Applied two masks on two different text elements, one on the left for the blurred text and one on the right for the normal text.
Animated both masks and the ellipse to get the final effect.
Everything works fine, however the animation is lagging on Firefox. Is there any way to make the animation smooth?
CodePen
body, html {
height: 100%;
margin: 0;
background: -webkit-radial-gradient(center, ellipse, #300 10%, #000 100%);
background: -moz-radial-gradient(center, ellipse, #300 10%, #000 100%);
background: radial-gradient(center, ellipse, #300 10%, #000 100%);
}
svg {
position: relative;
width: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<svg width="100%" height="200" viewBox="0 0 700 200">
<defs>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
<mask id="mask-left" maskUnits="userSpaceOnUse" x="0" y="0" width="700" height="200">
<path id="d1" d="M0,30 h0 c-35,15 -35,125 0,140 h0z" fill="white" />
<animate xlink:href="#d1" attributeType="XML" attributeName="d" from="M0,30 h0 c-35,15 -35,125 0,140 h-0z" to="M0,30 h700 c-35,15 -35,125 0,140 h-700z" dur="10s" repeatCount="indefinite" />
</mask>
<mask id="mask-right" maskUnits="userSpaceOnUse" x="0" y="0" width="700" height="200">
<path id="d2" d="M700,30 h-672 c-35,15 -35,125 0,140 h672z" fill="white" />
<animate xlink:href="#d2" attributeType="XML" attributeName="d" from="M700,30 h-700 c-35,15 -35,125 0,140 h700z" to="M700,30 h0 c-35,15 -35,125 0,140 h0z" dur="10s" repeatCount="indefinite" />
</mask>
</defs>
<text mask="url(#mask-right)" x="350" y="120" fill="white" text-anchor="middle" font-size="50" font-family="Ubuntu">Magic of Filter and Masking</text>
<text mask="url(#mask-left)" filter="url(#blur)" x="350" y="120" fill="white" text-anchor="middle" font-size="50" font-family="Ubuntu">Magic of Filter and Masking</text>
<ellipse id="e" cx="26" cy="100" rx="25" ry="70" fill="none" stroke="#600" stroke-width="2" />
<animate xlink:href="#e" attributeType="XML" attributeName="cx" from="0" to="700" dur="10s" repeatCount="indefinite" />
</svg>
I have taken a look at your svg animation in different browsers.
But it works without any lagging in FireFox and Chrome, but in Internet Explorer it's not working at all.
Maybe make use of Fakesmile, this is supported for Internet Explorer.
I'm at the end of my rope here. This 'mask' should work right? Well, I'm beginning to doubt. My example is at http://50.63.191.172/mask.html.
I really don't know what else I could try. I do have some constraints:
I would like to have the svg external to any html page / css stylesheet because it will be used from multiple places.
I would like to have svg non size predetermined, because I don't want to have multiple versions for various sizes; there should be only one, so that it can be cached by browsers.
I can't have the image specified inside the svg. The svg is a styling to be applied to any potential image.
I've tried multiple ways to make this work but no luck so far. It works just fine in Chrome/Safari using their '-webkit-mask' property. I've had "some" success with firefox and 'mask' if I specify the width and height of the masking rect in absolute pixels, but not as 100%. Is what I want even doable (an auto-scaling mask in firefox)? If yes, what am I missing?
The frustrating part, sometimes if I keep reloading the page, the images appear unmasked, only to be wiped off immediately after finish displaying.
Here's my svg:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="c1">
<g id="group">
<linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
<stop stop-color="white" offset="0"/>
<stop stop-color="white" stop-opacity="0" offset="1"/>
</linearGradient>
<rect x="0" y="0" width="100%" height="100%" fill="url(#g)" />
</g>
</mask>
</defs>
<use xlink:href="#group"/>
</svg>
And this is my html/css combined:
<html lang="en">
<head>
<meta charset=utf-8>
<title>Testing mask in various browsers</title>
<style>
.masked {
mask: url(mask.svg#c1); /*Firefox */
-webkit-mask: url('mask.svg'); /*Chrome, Safari */
}
.nob {
border: none;
outline: none;
}
div.stage { position: relative; }
.inline
{
display: inline-block;
}
span.stage
{
background-repeat: no-repeat;
background-position: center;
display: inline-block;
position: absolute;
left: 0px;
top: 0px;
}
.big { width:600px; height:588px; }
.normal { width:300px; height:294px; }
.small { width:150px; height:147px; }
</style>
</head>
<body style="background-image: url(background.gif);">
<div class="stage inline big">
<a class="nob" href="mask.html"><img class="nob masked" src="b_pic.jpg"/></a>
</div>
<div class="stage inline normal">
<a class="nob" href="mask.html"><img class="nob masked" src="pic.jpg"/></a>
</div>
<div class="stage inline small">
<a class="nob" href="mask.html"><img class="nob masked" src="s_pic.jpg"/></a>
</div>
</body>
</html>
What am I missing?
Turns out FF doesn't do percent. Instead it likes to work in objectBoundingBox units between 0 and 1. Well, Chrome/Safari don't like that. But there is a way to split the difference. Here's my working current version which I will aim to optimize next.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="c1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<g id="group1">
<linearGradient id="g1" gradientUnits="objectBoundingBox" x2="0" y2="1">
<stop stop-color="white" offset="0"/>
<stop stop-color="white" stop-opacity="0" offset="1"/>
</linearGradient>
<rect x="0" y="0" width="1" height="1" fill="url(#g1)" />
</g>
</mask>
<mask id="c2">
<g id="group2">
<linearGradient id="g2" gradientUnits="objectBoundingBox" x2="0" y2="1">
<stop stop-color="white" offset="0"/>
<stop stop-color="white" stop-opacity="0" offset="1"/>
</linearGradient>
<rect x="0" y="0" width="100%" height="100%" fill="url(#g2)" />
</g>
</mask>
</defs>
<use xlink:href="#group2"/>
</svg>
So it goes, it can be done.