Develop Reference

Change viewport width for component running inside svg

I Have a component that is perfectly responsive based on window width. Now this component is loaded dynamically inside an SVG through foriegnObject. The Problem is component is working based on window media queries while I want the component to run based on svg size.. Is it possible?
Here is the view
My Question is It possible to somehow run child component media queries based parent svg width and height
Here is code
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="357"
height="725"
fill="none"
viewBox="0 0 357 725"
>
......
<foreignObject
style={{ width: '322px', borderRadius: '30px' }}
x="5.2%"
y="5%"
height="656"
>
<div
id="style-4"
style={{
overflowY: 'auto',
overflowX: 'hidden',
width: '100%',
height: '634px',
}}
>
<ErrorBoundary>
<Suspense fallback={<CircularProgress />}>
<Component
profile={props.selectedProfile}
downloadVcf={() => console.log('vcf')}
/>
</Suspense>
</ErrorBoundary>
</div>
</foreignObject>
</svg>

Position a foreignObject to the top-right of an svg

I'm adding a foreignObject to a chart built upon svg. I want to put it on the top-right of the svg, irrespective of how big/small that svg is. So I don't want a hardcoded solution, I need a dynamic solution.
Setting width={'100%'} height={'100%'} inside the foreignObject isn't workable, because it makes the rest of the chart unclickable.
I've got a non-dynamic solution by setting x and y manually inside foreignObject, but I need a dynamic solution.
How can I achieve this?
<g>
<foreignObject //x={0} y={0}
width={'1'} height={'1'} style={{overflow: 'visible'}} x={50} y={50}>
<Menu>
<MenuButton as={Button} rightIcon={<ChevronDownIcon />}
transition="all 0.001s"
borderRadius="md"
borderWidth="0px"
_hover={{ bg: "gray.400" }}
_expanded={{ bg: "blue.400" }}
_focus={{ boxShadow: "none" }}
style={{ marginTop: "1px", position: "absolute", right: 0 }}>
Actions
</MenuButton>
<Portal>
<MenuList zIndex={10}>
<MenuItem>Download</MenuItem>
<MenuItem>Create a Copy</MenuItem>
<MenuItem>Mark as Draft</MenuItem>
<MenuItem>Delete</MenuItem>
<MenuItem>Attend a Workshop</MenuItem>
</MenuList>
</Portal>
</Menu>
</foreignObject>
</g>
Codesandbox:
https://codesandbox.io/s/floral-water-v11gx?file=/src/BasicLineSeries.tsx

Your parent component BasicLineSeries already knows the width, so you can pass that into the component generating the foreignObject as follows:
<ChartCanvas
height={height}
ratio={ratio}
width={width}
...
>
<Chart id={1} yExtents={this.yExtents}>
<LineSeries yAccessor={this.yAccessor} strokeWidth={3} />
<XAxis />
<YAxis />
</Chart>
<TestMenu width={width} />
</ChartCanvas>
function TestMenu({width}) {
return (
<g className="react-financial-charts-enable-interaction">
<foreignObject
width={"1"}
height={"1"}
style={{ overflow: "visible" }}
x={width}
y={50}
>

React Native SVG Image not loading

I created an svg. And want to re-create it in React-Native. I use this npm package for it (https://www.npmjs.com/package/react-native-svg#image).
Here is the SVG
What i created is this
<TestApp
imageWidth={2300}
imageHeight={1438}
width={width}
url={'./url/to/picture'}
scale1={0.00100794}
scale2={0.000666667}
/>
const TestApp = ({
width,
overlayColor = 'black',
overlayOpacity = '0.3',
translate1,
translate2,
scale1,
scale2,
imageWidth,
imageHeight,
url,
}) => {
const height = (254 / 202) * width;
const translate = translate1
? `translate(${translate1} ${translate2 ? translate2 : ''})`
: '';
const scale = scale1 ? `scale(${scale1} ${scale2 ? scale2 : ''})` : '';
return (
<Svg
width={width}
height={height}
viewBox={`0 0 ${202} ${254}`}
fill="none"
>
<Mask
id="breathMask"
mask-type="alpha"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width={width}
height={height}
>
<Path
d="M0 0H201.374V228.761C201.374 228.761 158.683 254 100.687 254C42.6913 254 0 228.761 0 228.761V0Z"
fill="#C4C4C4"
/>
</Mask>
<G mask="url(#breathMask)">
<Rect
x="1"
width={width}
height={(303 / 254) * height}
fill="url(#pattern0)"
/>
<Path
d="M0 0H201.374V228.761C201.374 228.761 158.683 254 100.687 254C42.6913 254 0 228.761 0 228.761V0Z"
fill={overlayColor}
fillOpacity={overlayOpacity}
/>
</G>
<Defs>
<Pattern
id="pattern0"
patternContentUnits="objectBoundingBox"
width="1"
height="1"
>
<Use href="#image0" transform={`${translate} ${scale}`} />
</Pattern>
<Image
id="image0"
widht={imageWidth}
height={imageHeight}
href="../path/to/url"
/>
</Defs>
</Svg>
);
};
Basically I copied the svg as it is.
The problem, the picture is not loading, even If I put a public url, such as this in it.
The svg with a grey background is not rendering. The picture will render in webview, though but not in ios or android.
You got any ideas how to fix it? Or a complete other way to achieve something like this?
Probably easiest way would be to just create a curved picture in photoshop, but thats not really dynamic.

Have you tried the using other parameters?
<Image
style={{ width: imageWidth, height: imageHeight }}
source={{
uri: '../path/to/url',
}}
/>

How we can reduce the number of svg icons inside React project?

I am working on a project which have around 100 icons inside the assets/icons folder. Some icons are quite similar such as trash(delete) icon with blue and red colour, and check icon with three different colour.
How we can pass the colour as props inside svg file. So that we can reduce the number of icon as much as possible.
Note : We don't want to make specific react component and pass the colour as props.
Here is an working example of my code. className="fill-red" will fill the colour in whole <svg /> . But how we can fill the colour in it's nested element like in <path/> or might be <rect/>
import { ReactComponent as Cross } from 'assets/icons/cross.svg';
import React from 'react';
const Alert = (props) => {
return (
<div>
<div className="flex items-start">
<Error className="mr-2 fill-red" />
{props.label}
</div>
</div>
);
};
export default Alert;
Here is my cross.svg
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.205 4.71967C15.4978 5.01256 15.4978 5.48744 15.205 5.78033L11.023 9.96229L15.205 14.1443C15.4979 14.4372 15.4979 14.9121 15.205 15.205C14.9121 15.4978 14.4372 15.4978 14.1443 15.205L9.96233 11.0229L5.78033 15.205C5.48744 15.4978 5.01256 15.4978 4.71967 15.205C4.42678 14.9121 4.42678 14.4372 4.71967 14.1443L8.90167 9.96229L4.71971 5.78033C4.42682 5.48744 4.42682 5.01256 4.71971 4.71967C5.0126 4.42678 5.48748 4.42678 5.78037 4.71967L9.96233 8.90163L14.1443 4.71967C14.4372 4.42678 14.9121 4.42678 15.205 4.71967Z"/>
</svg>

Html : to display hexagon progressbar with hoverable sides

I would like to display hexagon progress bar like below in my page.
where each side represents some data A. On hovering on each side, I would like to display a tool tip saying 'A is done'. How can I achieve this?
I tried SVG and and hexagonprogressbar.js. I could create hexagon but I am unable to figure out how to add onhover effect to each side. Any help would be appreciated.
This is how I created hexagon using svg <path>
<path id="id67441526994471690" d="M150 0 L285 75 L285 225 L150 300 L15 225 L15 75 L150 0" stroke="rgb(49, 120, 115)" stroke-width="35" fill="transparent" stroke-linecap="round" stroke-dasharray="2160" mask="url(#id67441526994471690)"></path>
If I add onhover to above it adds onhover even on all sides. I want add seperate event onhover event to each side.
Hexagonprogressbar.js creates same kind of svg.

I drew a hexagon using 6 lines which made it possible to make the sides of the hexagon independent.
When you hover to each side of the hexagon tooltip appears.
The tooltip is provided by the command svg <title>
polyline:hover {
stroke:orange;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="350" height="350" viewBox="0 0 80 80" >
<rect width="100%" height="100%" fill="#233340" />
<g transform="translate(7 7) rotate(90 32 32)" stroke="#317873" stroke-width="5" stroke-linecap="round">
<title>A is done </title>
<polyline id="p1" points="16 4.29, 48.5 4.29" />
<polyline id="p2" points="48 4.29, 64 32" />
<polyline id="p3" points="64 32, 48 59.71" />
<polyline id="p4" points="48 59.71, 16 59.71" />
<polyline id="p5" points="16 59.71, 0 32" />
<polyline id="p6" points="0 32, 16 4.29" />
</g>
<text x="25" y="35" font-size="12" fill="#fff" font-family="sans-serif"> Linux</text>
<text x="27" y="50" font-size="10" fill="#fff" font-family="sans-serif"> 100%</text>
</svg>
To see the tooltip, hold the cursor for a while on the side of the hexagon.