SVG turns black on page change - reactjs
I downloaded an SVG of a green beer mug from icons8 that I am using for my webiste's logo, and I have it stored inside a public/assets folder in my project. It is a NextJS (React meta-framework) project.
The vast majority of the time it works, but for some reason when I'm on my iPhone (both Chrome and Safari browsers) when I route to a new page via a link on my hompepage (a NextJS internal link that just takes user to a new page on the site), the majority of the SVG turns to black - a few tiny circles inside it seem unaffected but everything else goes dark.
Here it is as normal aka what it should always look like (sorry for overly big iPhone screen shots):
And here it is when it is being funky after routing to our /discussion page:
If we refresh the page the icon then goes back to normal, but obviously we don't want to have to refresh the page to get it to work every time!
For good measure, here is what the next.config.js file looks like:
module.exports = {
images: {
domains: ['prwhite.io.s3.amazonaws.com'],
},
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
issuer: {
test: /\.(js|ts)x?$/,
},
use: ['#svgr/webpack'],
});
return config;
},
};
And here is the actual SVG file:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32pt" height="32pt" viewBox="0 0 48 48" version="1.1">
<defs>
<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="144.881332" y1="100.333328" x2="51.16642" y2="100.333328" gradientTransform="matrix(0.27907,0,0,0.27907,0,0)">
<stop offset="0" style="stop-color:rgb(0%,0%,0%);stop-opacity:1;"/>
<stop offset="1" style="stop-color:rgb(0%,38.431373%,1.176471%);stop-opacity:1;"/>
</linearGradient>
<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="70.161667" y1="146.963257" x2="76.754997" y2="71.620079" gradientTransform="matrix(0.27907,0,0,0.27907,0,0)">
<stop offset="0" style="stop-color:rgb(18.039216%,80.000001%,44.313726%);stop-opacity:1;"/>
<stop offset="1" style="stop-color:rgb(0%,38.431373%,1.176471%);stop-opacity:1;"/>
</linearGradient>
<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="60.716" y1="-46.956001" x2="78.976669" y2="161.773163" gradientTransform="matrix(0.27907,0,0,0.27907,0,0)">
<stop offset="0" style="stop-color:rgb(18.039216%,80.000001%,44.313726%);stop-opacity:1;"/>
<stop offset="0.72" style="stop-color:rgb(10.196079%,73.725492%,61.176473%);stop-opacity:1;"/>
<stop offset="1" style="stop-color:rgb(0%,38.431373%,1.176471%);stop-opacity:1;"/>
</linearGradient>
<radialGradient id="radial0" gradientUnits="userSpaceOnUse" cx="75.633423" cy="58.519421" fx="75.633423" fy="58.519421" r="55.491501" gradientTransform="matrix(0.27907,0,0,0.27907,0,0)">
<stop offset="0" style="stop-color:rgb(98.039216%,98.039216%,98.431373%);stop-opacity:1;"/>
<stop offset="0.293" style="stop-color:rgb(96.470588%,96.862745%,97.254902%);stop-opacity:1;"/>
<stop offset="0.566" style="stop-color:rgb(80.000001%,80.000001%,80.000001%);stop-opacity:1;"/>
<stop offset="0.832" style="stop-color:rgb(84.705883%,86.274511%,87.450981%);stop-opacity:1;"/>
<stop offset="1" style="stop-color:rgb(78.431374%,80.392158%,81.960785%);stop-opacity:1;"/>
</radialGradient>
</defs>
<g id="surface9152533">
<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 39 21 L 39 35 L 32 35 L 32 21 L 39 21 M 39 18 L 32 18 C 30.34375 18 29 19.34375 29 21 L 29 35 C 29 36.65625 30.34375 38 32 38 L 39 38 C 40.65625 38 42 36.65625 42 35 L 42 21 C 42 19.34375 40.65625 18 39 18 Z M 39 18 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 8 21 L 33 21 L 33 40 L 8 40 Z M 8 21 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(20.392157%,28.627452%,36.862746%);fill-opacity:1;" d="M 13 24 C 11.894531 24 11 24.894531 11 26 C 11 27.105469 11.894531 28 13 28 C 14.105469 28 15 27.105469 15 26 C 15 24.894531 14.105469 24 13 24 Z M 13 24 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(20.392157%,28.627452%,36.862746%);fill-opacity:1;" d="M 13.5 34 C 12.671875 34 12 34.671875 12 35.5 C 12 36.328125 12.671875 37 13.5 37 C 14.328125 37 15 36.328125 15 35.5 C 15 34.671875 14.328125 34 13.5 34 Z M 13.5 34 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(20.392157%,28.627452%,36.862746%);fill-opacity:1;" d="M 28.5 28 C 27.671875 28 27 28.671875 27 29.5 C 27 30.328125 27.671875 31 28.5 31 C 29.328125 31 30 30.328125 30 29.5 C 30 28.671875 29.328125 28 28.5 28 Z M 28.5 28 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(20.392157%,28.627452%,36.862746%);fill-opacity:1;" d="M 19 29 C 18.449219 29 18 29.449219 18 30 C 18 30.550781 18.449219 31 19 31 C 19.550781 31 20 30.550781 20 30 C 20 29.449219 19.550781 29 19 29 Z M 19 29 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(20.392157%,28.627452%,36.862746%);fill-opacity:1;" d="M 24 34 C 23.449219 34 23 34.449219 23 35 C 23 35.550781 23.449219 36 24 36 C 24.550781 36 25 35.550781 25 35 C 25 34.449219 24.550781 34 24 34 Z M 24 34 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 8 40 L 8 42 C 8 43.105469 8.894531 44 10 44 L 31 44 C 32.105469 44 33 43.105469 33 42 L 33 40 Z M 8 13 L 33 13 L 33 21 L 8 21 Z M 8 13 "/>
<path style=" stroke:none;fill-rule:nonzero;fill:url(#radial0);" d="M 34.910156 9.265625 C 34.6875 8.3125 33.960938 7.519531 33.042969 7.1875 C 32.210938 6.886719 31.429688 6.972656 30.765625 7.269531 C 30.269531 5.945312 29 5 27.5 5 C 26.839844 5 26.230469 5.191406 25.707031 5.507812 C 25.113281 4.039062 23.679688 3 22 3 C 20.882812 3 19.871094 3.460938 19.144531 4.203125 C 18.246094 2.875 16.726562 2 15 2 C 12.238281 2 10 4.238281 10 7 C 10 7.066406 10.015625 7.125 10.019531 7.191406 C 9.296875 6.925781 8.464844 6.882812 7.542969 7.417969 C 6.769531 7.863281 6.179688 8.628906 6.039062 9.511719 C 5.800781 11.023438 6.695312 12.351562 8 12.816406 L 8 13 L 13.007812 13 C 13.570312 14.179688 15.113281 15 16.507812 15 C 17.898438 15 19.441406 14.179688 20.007812 13 L 20.613281 13 C 21.378906 13 22 13.621094 22 14.386719 L 22 17.5 C 22 18.328125 22.671875 19 23.5 19 C 24.328125 19 25 18.328125 25 17.5 L 25 23.5 C 25 24.328125 25.671875 25 26.5 25 C 27.328125 25 28 24.328125 28 23.5 L 28 13 L 33 13 L 33 12.816406 C 34.375 12.328125 35.296875 10.878906 34.910156 9.265625 Z M 34.910156 9.265625 "/>
</g>
</svg>
We need a hero! Any help is greatly appreciated.
Related
How to draw an SVG on Scroll in Next JS
Background
I've been reading everything, and watching everything and can't quite figure it out. I know the very basics of React JS from FCC and have went through a large chunk of Fireship.io course on Next JS. Any help is appreciated.
What I Am Attempting To Do
I have an SVG logo, and I am attempting to animate it when scrolling. I'm trying to follow this tutorial: https://www.w3schools.com/howto/howto_js_scrolldrawing.asp which is written for Vanilla JS, HTML/CSS. I've made a website with Vanilla JS and hypertext preprocessor, but am now attempting to learn front-end frameworks, and thus am implementing in React.
What Seems to Be The Problem
I am using functional components, and these documents are pretty confusing. Apparently, you can't use the ref keywords with functional components and would have to use classes, which I am trying to avoid.
Current Work
This is what I currently have:
// Packages to import:
import React from 'react';
export default function Home() {
// Initialization:
var homepage_logo_main_content = React.useRef(); /* So why we can use this but not . notation for font awesome icons? */
// Update value of SVG on scroll to present animation effect:
function animate_svg_on_scroll(value) {
var homepage_logo_main_content_total_length = homepage_logo_main_content.current.getTotalLength(); // Getting the total length of the SVG path.
homepage_logo_main_content.current.style.strokeDasharray = homepage_logo_main_content_total_length; // Get the starting position of the draw.
homepage_logo_main_content.current.style.strokeDashoffset = homepage_logo_main_content_total_length;
var draw = homepage_logo_main_content_total_length * value;
};
React.useEffect(() => {
const handleScroll = event => {
const value = window.scrollY / 1069;
animate_svg_on_scroll(value);
};
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
return (
<div className = "homepage_main_div">
<svg xmlns = "http://www.w3.org/2000/svg" version="1.0" width="400.000000pt" height = "400.000000pt" viewBox = "0 0 400.000000 400.000000" preserveAspectRatio = "xMidYMid meet" className = "homepage_logo">
<g transform = "translate(0.000000,400.000000) scale(0.100000,-0.100000)" fill = "#000000" stroke = "none">
<path id = "tiger" ref = {homepage_logo_main_content} d = "M0 2000 l0 -2000 2000 0 2000 0 0 2000 0 2000 -2000 0 -2000 0 0 -2000z 2z"/>
<path d = "M820 2176 c-25 -7 -61 -21 -80 -31 -54 -28 -148 -124 -187 -189 -32 -55 -83 -176 -83 -197 0 -15 265 -10 348 7 190 38 282 121 282 251 0 69 -21 110 -75 143 -45 28 -140 35 -205 16z"/>
<path d = "M1800 1585 c0 -161 2 -186 16 -192 9 -3 20 0 25 8 5 8 8 93 6 189 -2 173 -2 175 -24 178 l-23 3 0 -186z"/>
</g>
</svg>
<h1> Welcome to this math website </h1>
</div>
)
}
Next JS doesn't seem to throw an error, and the website renders. When I scroll, the useEffect hook and the event listener does output the Y scroll position. However, nothing in the animate_svg_on_scroll seems to work.
If TL;DR, please see the link above from W3 schools and suggest how to implement in Next JS and what resources to watch/read. Thank you so very much (been working on this for a couple of days).
Your path is not display because of stroke="none" in g tag. Change it to another color then path will display
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.0"
width="400.000000pt"
height="400.000000pt"
viewBox="0 0 400.000000 400.000000"
preserveAspectRatio="xMidYMid meet"
className="homepage_logo"
>
<g
transform="translate(0.000000,400.000000) scale(0.100000,-0.100000)"
fill="none"
stroke="red"
stroke-width="20"
>
<path
id="tiger"
d="M0 2000 l0 -2000 2000 0 2000 0 0 2000 0 2000 -2000 0 -2000 0 0 -2000z 2z"
ref={homepage_logo_main_content}
/>
<path d="M820 2176 c-25 -7 -61 -21 -80 -31 -54 -28 -148 -124 -187 -189 -32 -55 -83 -176 -83 -197 0 -15 265 -10 348 7 190 38 282 121 282 251 0 69 -21 110 -75 143 -45 28 -140 35 -205 16z" />
<path d="M1800 1585 c0 -161 2 -186 16 -192 9 -3 20 0 25 8 5 8 8 93 6 189 -2 173 -2 175 -24 178 l-23 3 0 -186z" />
</g>
</svg>
You can refer my codesandbox
Adding Character String with Numbers / Concatenate Number with String in Matlab Array
How to add character ',' or '+' in a matlab 2d array.
I've tried the following way.
clc
clear all
close all
min=0;
max=1052;
random_int = randi([min max],5,10)
% random_int=[515,586,942,742;353,588,916,436]
% load('Random_Int_x.mat')
% random_int
[m,n]=size(random_int);
for i=1:1:m
allOneString = sprintf('%d,' , random_int(i,:));
allOneString= allOneString(1:end-1)% strip final comma
Str_1(i,:)=allOneString
% allOneString= strjoin(arrayfun(#(x) num2str(x),random_int(i,:),'UniformOutput',false),',');
end
Str_1
Example of Input / Matrix
random_int =
2 9 7 7 9 8 2 5 7 5
6 1 9 9 6 1 9 4 1 0
5 0 8 8 5 6 9 0 4 6
0 9 9 8 7 5 6 3 7 8
8 4 2 0 5 5 1 8 2 6
Output:
Str_1 =
5×19 char array
'2,9,7,7,9,8,2,5,7,5'
'6,1,9,9,6,1,9,4,1,0'
'5,0,8,8,5,6,9,0,4,6'
'0,9,9,8,7,5,6,3,7,8'
'8,4,2,0,5,5,1,8,2,6'
This works properly with random number between 0-9.. However if I put input above 9 --> 10 .. then matlab throws matrix dimension error.
Subscripted assignment dimension mismatch.
Error in Number_with_String (line 14)
Str_1(i,:)=allOneString;
For Input above 9:
random_int =
76 96 88 23 26 25 92 5 61 86
87 69 32 36 86 39 46 21 55 69
42 26 56 69 55 97 91 78 76 41
74 74 24 3 46 52 29 70 88 4
7 48 13 69 15 12 79 91 90 24
Expecting output:
'76,96,88,23,26,25,92,5,61,86'
'87,69,32,36,86,39,46,21,55,69' ... etc
Any suggestion to resolve this ..
Here's a way:
random_int = randi([0 500],5,10); % example data
y = mat2cell(random_int, ones(1,size(random_int,1)), size(random_int,2)); % split into rows
y = cellfun(#(x) sprintf('%i,', x), y, 'UniformOutput', false); % strings with commas
y = cellfun(#(s) s(1:end-1), y, 'UniformOutput', false); % remove last comma from each
Example result:
>> y
y =
5×1 cell array
'74,281,294,376,124,203,211,170,242,334'
'488,268,31,84,404,74,205,178,215,20'
'120,242,390,37,113,199,140,375,395,469'
'455,94,115,476,28,20,365,213,181,31'
'130,62,138,421,261,105,114,226,398,90'
I would recommend you use string which shipped in 16b. You can convert the result to char or cellstr if you need. >> min=0; max=1052; >> random_int = randi([min max],5,10) random_int = 532 145 857 264 616 793 558 494 327 688 736 157 256 648 578 400 820 12 556 725 938 271 978 498 965 597 983 354 174 787 1010 885 368 370 300 79 136 170 633 474 576 267 207 874 797 56 598 836 276 88 >> str = join(string(random_int),',') str = 5×1 string array "532,145,857,264,616,793,558,494,327,688" "736,157,256,648,578,400,820,12,556,725" "938,271,978,498,965,597,983,354,174,787" "1010,885,368,370,300,79,136,170,633,474" "576,267,207,874,797,56,598,836,276,88" >> char(str) ans = 5×39 char array '532,145,857,264,616,793,558,494,327,688' '736,157,256,648,578,400,820,12,556,725 ' '938,271,978,498,965,597,983,354,174,787' '1010,885,368,370,300,79,136,170,633,474' '576,267,207,874,797,56,598,836,276,88 '
clc
clear all
close all
min=0;
max=1052;
random_int = randi([min max],200,10);
[m,n]=size(random_int);
for i=1:1:m
allOneString = sprintf('%d,' , random_int(i,:));
allOneString= allOneString(1:end-1); % strip final comma
Str_1{i}=allOneString;
end
Str_1=Str_1'
SQL Server: Create new query that matches prices and values from two separate queries
I have a database problem that I have no idea how to code so any kind of help will be much appreciated. Basically it is matching different schedules with their corresponding prices. I have two queries . . . First query contains prices based on whether it is a peak hour (Hour 7 to 22 of the day) or Offpeak hour (all other hours of the day) SQLQuery1.sql dte Peak Offpeak 3-23-2015 32.6 17.12 3-24-2015 34.98 17.21 3-25-2015 31.87 19.45 The Second query contains different values per hour WP-Schedule.sql CPT Resource 1 2 3 4 5 6 7 8 . . . 24 3-23-2015 WP1 -34 -34 -37 -29 -17 0 -23 -3 25 3-23-2015 WP2 -36 -35 -36 -31 -19 14 15 0 34 3-23-2015 WP3 -34 -34 -35 -31 -18 18 19 3 31 3-24-2015 WP1 -32 -32 -32 -34 -19 15 21 0 30 3-24-2015 WP2 -34 -32 -29 -32 -20 21 23 4 18 3-24-2015 WP3 -36 -35 -36 -31 -19 14 15 0 34 3-25-2015 WP1 -34 -34 -37 -29 -17 0 23 0 25 3-25-2015 WP2 -32 -32 -32 -34 -19 15 21 0 30 3-25-2015 WP3 -34 -32 -29 -32 -20 21 23 16 18 What I am trying to do with these two queries is use the information to create a new query that shows me the price every hour for each resource. The conditions are that for every hour their is only a charge if the value in the WP-Schedule.sqlquery is less than 0. Also if the hour is a Peak hour then it should use the Peak price for that day and if not then use the Offpeak price. If I were to manually create what the first row should look like it would be this: dte/CPT Resource 1 2 3 4 5 6 7 8 . . . 24 3-23-2015 WP1 17.12 17.12 17.12 17.12 17.12 0 32.6 32.6 0 Help on this coding would be much appreciated!!!!
One way to do this is with 24 CASE expressions. SELECT ... ... CASE WHEN s.[1] < 0 THEN p.OffPeak ELSE 0 END AS [1], ... CASE WHEN s.[7] < 0 THEN p.Peak ELSE 0 END AS [7], ... FROM (YourFirstQuery) p JOIN (YourSecondQuery) s ON p.dte=s.CPT
Center path content inside button
I have a very simple path (just a + sign) that I exported from Inkscape and I would like to use it as the content of a button but when I do, the path is off center. <Button Height="24" Width="24"> <Viewbox HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Fill"> <Path Fill="#000000" Data="M 11 5 L 11 11 L 5 11 L 5 13 L 11 13 L 11 19 L 13 19 L 13 13 L 19 13 L 19 11 L 13 11 L 13 5 L 11 5 z"/> </Viewbox> </Button> I've wrapped it in a Viewbox so I can scale it and I've tried playing with the HorizontalAlignment, VerticalAlignment and LayoutRounding but they don't seem to affect the positioning. I'm guessing the path data itself is responsible for this..probably starting with the first Move To (M) but I'm not confident with editing the path manually. Is there any way to correct this so it displays centered inside the button? I have many more buttons to build so I'd like to understand what's going on. Here's the original SVG: <svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24" enable-background="new 0 0 24 24" width="48" height="48"> <path style="text-indent:0;text-align:start;line-height:normal;text-transform:none;block-progression:tb;-inkscape-font-specification:Bitstream Vera Sans" d="M 11 5 L 11 11 L 5 11 L 5 13 L 11 13 L 11 19 L 13 19 L 13 13 L 19 13 L 19 11 L 13 11 L 13 5 L 11 5 z" color="#000" overflow="visible" enable-background="accumulate" font-family="Bitstream Vera Sans"/> Thank You!!
Use something like this: <Button Width="24" Height="24"> <Path Margin="2" Data="M 11 5 L 11 11 L 5 11 L 5 13 L 11 13 L 11 19 L 13 19 L 13 13 L 19 13 L 19 11 L 13 11 L 13 5 L 11 5 z" Fill="#000000" Stretch="Fill" /> </Button> No need for a ViewBoxwhen you have a Path
Data field shifting through a vector of data in matlab
I need to create a data field that will go through a vector. Data field is constant length, and it is going through the data vector shifting data field with data field length. I need the mean value of that field (A vector) that corresponds to a mean value of another field (B vector).
Example:
A=[1 5 7 8 9 10 11 13 15 18 19 25 28 30 35 40 45 48 50 51];
B=[2 4 8 9 12 15 16 18 19 20 25 27 30 35 39 40 45 48 50 55];
I want to do next:
A=[{1 5 7 8 9} 10 11 13 15 18 19 25 28 30 35 40 45 48 50 51];
B=[{2 4 8 9 12} 15 16 18 19 20 25 27 30 35 39 40 45 48 50 55];
I want to take data from field of 5 points and get mean value. And then shift whole data field with data field length.
A=[1 5 7 8 9 {10 11 13 15 18} 19 25 28 30 35 40 45 48 50 51];
B=[2 4 8 9 12 {15 16 18 19 20} 25 27 30 35 39 40 45 48 50 55];
I need two vectors, C and D with mean values of this method.
C=[6 13.4 27.4 45.2];
D=[7 17.6 31.2 47.6];
I started something with
n = length(A);
for k = 1:n
....
but nothing I tried worked.
reshape the vector into a 5-row matrix and then compute the mean of each column: C = mean(reshape(A,5,[]),1); D = mean(reshape(B,5,[]),1)