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
Related
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.
Consider the following SVG code for moving a circle around the center of the screen, with hard-coded dimensions:
<svg xmlns="http://www.w3.org/2000/svg">
<g>
<ellipse id="circ" style="fill:#000000"
cx="60%" cy="50%"
rx="10" ry="10" />
<!--Assuming window size is 1000x1000-->
<animateTransform attributeName="transform"
type="rotate" dur="10s"
from="0,500,500"
to="360,500,500"
repeatCount="indefinite"/>
</g>
</svg>
If I try to provide the center of rotation in percent, the animation doesn't work at all:
<animateTransform attributeName="transform"
type="rotate" dur="10s"
from="0,50%,50%"
to="360,50%,50%"
repeatCount="indefinite"/>
How do I fix this?
Set a viewBox on your SVG, then whatever size you make it, the ellipse will rotate around the centre of it.
viewBox="0 0 1000 1000"
The value of 1000 for width and height here is chosen because it would make 500 be the centre.
svg:nth-child(1) {
width: 200px;
}
svg:nth-child(2) {
width: 500px;
}
svg {
border: solid 1px green;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
<g>
<ellipse id="circ" style="fill:#000000"
cx="60%" cy="50%"
rx="10" ry="10" />
<!--Assuming window size is 1000x1000-->
<animateTransform attributeName="transform"
type="rotate" dur="10s"
from="0,500,500"
to="360,500,500"
repeatCount="indefinite"/>
</g>
</svg>
<!-- An exact duplicate of th first one -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
<g>
<ellipse id="circ" style="fill:#000000"
cx="60%" cy="50%"
rx="10" ry="10" />
<!--Assuming window size is 1000x1000-->
<animateTransform attributeName="transform"
type="rotate" dur="10s"
from="0,500,500"
to="360,500,500"
repeatCount="indefinite"/>
</g>
</svg>
For some reason my spinner.svg is not animating when using xlink:href. Embedding the SVG on the page and using xlink:href seems to work fine, as the snippet below shows.
The problem: static (and solid!) spinner instead of animation
Why are the animation tags of the SVG suddenly not taking effect? The reference must be working since the image is actually displaying.
EDIT: Could this have to do with the shadow dom and xref?
According to Sara Soueidan "The target element must be part of the current SVG document fragment". I might be overloading what "document fragment" means, but to me document fragments belong in Shadow DOM land, and I suspect that SMIL animations might not work when using <use> statements due to this?
Working versions
.xlinked {
color: green;
}
img {
color: red; // not taking effect - of course! just a test.
}
.embedded {
color: blue;
}
<h1>xlink local</h1>
<svg class="xlinked">
<!-- could not get this external reference to work?
<use xlink:href="http://imgh.us/spinner_1.svg" />
-->
<use xlink:href="#spinner" />
</svg>
<h1>embedded</h1>
<div class="embedded">
<svg id="embedded" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<circle cx="50" cy="50" r="45" stroke="rgba(43,43,43,0.3)" fill="none" stroke-width="10" stroke-linecap="round"/>
<circle cx="50" cy="50" r="45" stroke="currentColor" fill="none" stroke-width="6" stroke-linecap="round">
<animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"/>
<animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"/>
</circle>
</svg>
</div>
<h1>img</h1>
<img src="http://imgh.us/spinner_1.svg" />
<h1>External absolute xlink (not working)</h1>
<svg>
<!-- could not get this external reference to work. should be the same as a local reference? -->
<use xlink:href="http://imgh.us/spinner_1.svg" />
</svg>
<h1>Source SVG with symbols for xlink reference </h1>
<svg xmlns="http://www.w3.org/2000/svg"><symbol id="spinner" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="50" cy="50" r="45" stroke="rgba(43,43,43,0.3)" fill="none" stroke-width="10" stroke-linecap="round"/><circle cx="50" cy="50" r="45" stroke="currentColor" fill="none" stroke-width="6" stroke-linecap="round"><animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"/><animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"/></circle></symbol></svg>
In SVG1.1, Use element requires reference to SVG fragment not SVG URL. Try to add id attribute to root svg element of external SVG file and add hash string to href value of use element, like this.
external svg(spinner_1.svg)
<svg xmlns="http://www.w3.org/2000/svg" id="root">
<!--svg structure-->
</svg>
html uses external SVG file
<svg>
<use xlink:href="http://imgh.us/spinner_1.svg#root" />
</svg>
Note:In SVG2, you can set SVG URL to href attribute of use element. See https://www.w3.org/TR/2016/CR-SVG2-20160915/struct.html#UseElement
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.