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
Related
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
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.
I have a vector which is like
x = [20 11 12 13 14 15 16 17 18 19]
I would like to shift the vector values as given
if (i = 1)
X = [11 12 13 14 15 16 17 18 19 20]
if (i = 2)
X = [12 13 14 15 16 17 18 19 20 11]
if (i = 3)
X = [13 14 15 16 17 18 19 20 11 12]
At present I am using a for loop to do this, but it takes a lot of time
x = [20 11 12 13 14 15 16 17 18 19];
in = x;
C1 = x;
for lt = 1:1:length(in)
C1 = x ;
if (lt > 1)
for tt = 1:1:lt-1
swap = C1(1);
for pt = 1:1:length(in)-1
C1(pt) = C1(pt+1);
end
C1(length(in)) = swap;
end
end
disp(C1);
end
Could some one please suggest me a faster algorithm?
Let s denote the number of positions you want to shift. You can use circshift:
x_shifted = circshift(x, [1 -s]);
The second argument is [1 -s] because you want to shift s positions to the left in the second dimension (columns).
You can also do it manually with mod:
x_shifted = x(mod((1:numel(x))+s-1, numel(x))+1);
circshift is the way to go but you could also do it with pretty simple indexing:
x_shifted = x([(i+1):end , 1:(i-1)])
This however assumes that 1 < i && i < length(x).
You could pre-calculate all C1's in one go (vectorized manner) before the start of the loop(s) and use their values inside the loop(s) directly with indexing alone and thus save time on calculating them -
N = numel(x);
C1_all = x(mod(bsxfun(#plus,[0:N-1]',0:N-1),N)+1)
Code run for given x -
C1_all =
20 11 12 13 14 15 16 17 18 19
11 12 13 14 15 16 17 18 19 20
12 13 14 15 16 17 18 19 20 11
13 14 15 16 17 18 19 20 11 12
14 15 16 17 18 19 20 11 12 13
15 16 17 18 19 20 11 12 13 14
16 17 18 19 20 11 12 13 14 15
17 18 19 20 11 12 13 14 15 16
18 19 20 11 12 13 14 15 16 17
19 20 11 12 13 14 15 16 17 18
I can also suggest using hankel. You can use hankel to generate a set of indices that you would use to index into x where each row gives you the circular shift amount you're looking for. Something like this:
x = [20 11:19];
c = x(hankel([1:numel(x)], [numel(x) 1:numel(x)-1]))
c =
20 11 12 13 14 15 16 17 18 19
11 12 13 14 15 16 17 18 19 20
12 13 14 15 16 17 18 19 20 11
13 14 15 16 17 18 19 20 11 12
14 15 16 17 18 19 20 11 12 13
15 16 17 18 19 20 11 12 13 14
16 17 18 19 20 11 12 13 14 15
17 18 19 20 11 12 13 14 15 16
18 19 20 11 12 13 14 15 16 17
19 20 11 12 13 14 15 16 17 18
I'm not comfortable with array manipulation (and english writing, sorry ..)
I've this data frame (aa):
aa<-data.frame(replicate(10,sample(0:17,30,rep=TRUE)))
> aa
X1 X2 X3 X4 X5 X6 X7 X8 X9 X10
1 17 7 9 2 3 7 17 0 15 1
2 12 5 10 10 8 17 13 7 2 2
3 14 14 7 7 16 1 13 0 14 6
4 12 10 10 15 7 2 7 11 4 0
5 1 9 5 5 8 15 15 11 8 17
6 8 0 9 6 7 11 9 12 4 17
7 17 1 17 5 11 8 16 0 2 15
8 10 7 15 6 17 3 0 16 16 15
9 8 3 14 13 16 5 15 8 14 10
10 11 13 15 3 17 13 13 4 11 12
11 9 13 0 7 4 13 15 1 2 0
12 1 3 17 13 10 4 12 5 4 15
13 5 8 9 8 0 6 14 13 0 8
14 17 11 10 4 15 10 7 1 1 7
15 2 0 16 7 13 10 13 3 10 7
16 5 5 15 7 0 17 10 14 11 4
17 10 17 9 11 0 9 9 17 0 4
18 12 8 8 16 11 4 10 16 4 7
19 5 7 13 12 17 17 17 17 6 8
20 13 17 1 2 0 1 8 4 17 17
21 15 15 5 13 6 16 5 5 14 13
22 12 4 5 1 2 7 17 2 9 9
23 12 5 13 16 6 6 15 2 13 10
24 8 6 12 4 5 11 7 12 14 10
25 5 11 15 1 17 3 8 10 4 4
26 3 10 8 14 1 13 16 1 16 11
27 10 2 14 11 6 8 13 3 8 10
28 14 5 7 12 8 14 16 9 16 14
29 5 17 16 17 12 1 3 8 2 0
30 5 17 12 2 8 9 3 1 14 15
I would like to create an array wich is the result of a cutting of dataframe (aa) like this (by seq of x elements, here for exemple 10): an array with 3 dimensions
, , 1
X1 X2 X3 X4 X5 X6 X7 X8 X9 X10
1 17 7 9 2 3 7 17 0 15 1
2 12 5 10 10 8 17 13 7 2 2
3 14 14 7 7 16 1 13 0 14 6
4 12 10 10 15 7 2 7 11 4 0
5 1 9 5 5 8 15 15 11 8 17
6 8 0 9 6 7 11 9 12 4 17
7 17 1 17 5 11 8 16 0 2 15
8 10 7 15 6 17 3 0 16 16 15
9 8 3 14 13 16 5 15 8 14 10
10 11 13 15 3 17 13 13 4 11 12
, , 2
X1 X2 X3 X4 X5 X6 X7 X8 X9 X10
11 9 13 0 7 4 13 15 1 2 0
12 1 3 17 13 10 4 12 5 4 15
13 5 8 9 8 0 6 14 13 0 8
14 17 11 10 4 15 10 7 1 1 7
15 2 0 16 7 13 10 13 3 10 7
16 5 5 15 7 0 17 10 14 11 4
17 10 17 9 11 0 9 9 17 0 4
18 12 8 8 16 11 4 10 16 4 7
19 5 7 13 12 17 17 17 17 6 8
20 13 17 1 2 0 1 8 4 17 17
etc...
i've already tried this...
aa_lag <-array(aa[1:10,],dim=c(dim(aa),3))
thank you so much for answer...
You can try
aa1 <- t(aa)
dim(aa1) <- c(10,10,3)
aa2 <- aperm(aa1, c(2,1,3))
Checking the results
m1 <- as.matrix(aa[1:10,])
dimnames(m1) <- NULL
identical(m1, aa2[,,1])
#[1] TRUE
Or using seq
lst <- lapply(seq(1,30, by=10), function(i) aa[i:(i+9),])
aa3 <- array(unlist(lst), dim=c(10,10,3))
identical(aa2, aa3)
#[1] TRUE
data
set.seed(24)
aa<-data.frame(replicate(10,sample(0:17,30,rep=TRUE)))
I have the following XAML code:
<Path Data="M0,0 L 12 0 L 12 12 L 0 12 Z M 6 0 L 6 12 M 0 6 L 12 6" StrokeDashArray="1 1" Stroke="Black" StrokeThickness="1" SnapsToDevicePixels='True">
</Path>
However it looks horribly fuzzy on my screen.
Is there a solution?
If you just want a crisp, dashed path and you may be able to get the results you want by declaring the RenderOptions.EdgeMode as Aliased to prevent the framework from interpolating the path outline when a dash falls between pixel boundaries:
<Path Data="M0,0 L 12 0 L 12 12 L 0 12 Z M 6 0 L 6 12 M 0 6 L 12 6" StrokeDashArray="1 1" Stroke="Black" StrokeThickness="1" RenderOptions.EdgeMode="Aliased">
</Path>