Develop Reference

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}
>

How do I resize and svg logo in react gatsby?

I have been trying to resize this logo without making the container itself larger. I'm completely stuck and dont know what to do. Modifying the logo svg file with inline styling
<svg viewBox="0 0 493.19 493.19" width='400'height='400'> produces the above result. I just want to make the logo bigger without pushing down all the components under it. I will post the layout code itself, if that will make things easier to help me out. Thank you!
const data: QueryResult = useStaticQuery(query)
return (
<ThemeProvider theme={theme}>
<>
<GlobalStyles />
<Wrapper>
<SideBarInner bg={color} as="aside" p={[6, 6, 8]}>
<Flex
flexWrap="nowrap"
flexDirection={['row', 'row', 'row', 'column']}
alignItems={['center', 'center', 'center', 'flex-start']}
justifyContent="space-between"
>
<Box width={['3rem', '4rem', '5rem', '8rem']}>
<Link to="/" aria-label="LekoArts, Back to Home">
<Logo />
</Link>
</Box>
<Nav
color={color}
mt={[0, 0, 0, 10]}
as="nav"
flexWrap="nowrap"
flexDirection={['row', 'row', 'row', 'column']}
alignItems="flex-start"
>
{data.navigation.nodes.map((item) => (
<PartialNavLink to={item.link} key={item.name}>
{item.name}
</PartialNavLink>
))}
</Nav>
</Flex>
</SideBarInner>
<Main>{children}</Main>
<Footer color={color}>
<Box p={[6, 6, 8]} fontSize={0}>
little things with love LekoArts.<br />
Source.
</Box>
</Footer>
</Wrapper>
</>
</ThemeProvider>
)
}
export default Layout```

The SVG viewBox dimensions don't change the size of the paths in the SVG, they change the size of the SVG object that contains the paths which results with that extra white-space.
I would undo the changes you made to the viewBox and remove the width and height inline styles. Then, the SVG should resize automatically to fit the container that it is in.

Try setting the width to 100% in the svg code and then control the size of svg with CSS (however you are implmenting css) by adjusting the width of the container that holds the svg.
Something like:
.sl-container {
width: 4rem;
}
EDIT:
If you need help implementing the css you can find a good explanation of numerous implmentations here. Inline styling is probably the simplest way to do it.
<Logo style="width: 4rem;" />

What should I use to show live icons in React OR Javascript? Like how much coffee is filled in a mug?

I want to create dashboard with lots of live icons. Live icons means icons content will change dynamically.
For example:- Let say i have an icon of a coffee cup, based upon number of coffee sold the coffee level in cup goes up.
I tried solving it using SVG & CSS. Below is the live code-sandbox DEMO example. (same code I am posting below)
https://codesandbox.io/s/fill-coffee-to-svg-1sfb0
what exactly I am doing is on top of SVG component i using div node and applying css on the div tag.
Issue is that, It is very difficult to manage path/points dynamically in SVG, also for different screen version it will be difficult.
Can anyone suggest any better approach for this.
import ReactDOM from "react-dom";
import React, { Component } from "react";
class Todo extends Component {
state = { height: 4 };
setHeight = (e, fillType) => {
e.preventDefault();
console.log(this.state.height);
if (this.state.height < 100) {
if (fillType === "fill") {
this.setState({
height: this.state.height + 2
});
}
}
if (this.state.height >= 2) {
if (fillType === "drink") {
this.setState({
height: this.state.height - 2
});
}
}
};
render() {
return (
<div>
<svg width="255" height="224" xmlns="http://www.w3.org/2000/svg">
<g>
<rect
fill="#fff"
id="canvas_background"
height="226"
width="257"
y="-1"
x="-1"
/>
<g
display="none"
overflow="visible"
y="0"
x="0"
height="100%"
width="100%"
id="canvasGrid"
>
<rect
fill="url(#gridpattern)"
stroke-width="0"
y="0"
x="0"
height="100%"
width="100%"
/>
</g>
</g>
<g>
<title>Layer 1</title>
<path
stroke="#000"
id="svg_1"
d="m78.82963,176.75921l97.93778,0c14.11708,-0.03733 23.74788,-17.00704 23.70086,-34.46505l0,-11.73873c27.94999,-0.03136 48.22814,-30.02253 48.21769,-64.99381c0.01045,-35.59398 -19.86965,-64.83701 -43.00946,-64.81162l-150.95938,0l0,141.54714c0.02194,19.22158 11.60543,34.42772 24.1125,34.46207zm121.63551,-149.38391l0,0l5.20823,0c19.14875,-0.04331 25.29102,25.83983 25.19908,38.38045c0.01881,20.24897 -10.47393,39.66916 -30.40731,37.78463l0,-76.16508zm-199.71514,158.00316c0.01776,26.16387 13.9729,38.29683 25.20535,38.37149l202.59351,0c13.39827,-0.07466 25.14161,-15.13147 25.20117,-38.37149l-253.00002,0z"
stroke-width="1.5"
fill="#fff"
/>
</g>
</svg>
<div
style={{
position: "absolute",
left: "63px",
top: "9px",
height: "175px",
width: "145px",
borderBottomLeftRadius: "25px",
borderBottomRightRadius: "25px",
overflow: "auto"
}}
>
<div
style={{
height: this.state.height + "%",
width: "100%",
position: "absolute",
bottom: "0",
zIndex: 1000,
background: "green",
transition: "all .4s"
}}
/>
</div>
<button onClick={e => this.setHeight(e, "fill")}>
fill more cofee +
</button>
<button onClick={e => this.setHeight(e, "drink")}>drink cofee -</button>
</div>
);
}
}
ReactDOM.render(<Todo />, document.getElementById("root"));

Have you tried using the react-spring library?
In the basics section of react-spring documentation (can be found here - https://www.react-spring.io/docs/hooks/basics) this code snippet is given:
const props = useSpring({ x: 100, from: { x: 0 } })
return (
<animated.svg strokeDashoffset={props.x}>
<path d="..." />
</animated.svg>
)
Using your example of your coffee mug, if you would render your mug separate to the coffee filling the mug, with the coffee stroke being upwards, then you could use this technique to animate the coffee height.
Edit:
As you are using a class component you will want to use the render props API for this - https://www.react-spring.io/docs/props/spring
<Spring
from={{ x: 100 }}
to={{ x: 0 }}>
{props => (
<svg strokeDashoffset={props.x}>
<path d="..." />
</svg>
)}
</Spring>

how center my react-native svg in my view and all my screens

,
I would like to center an svg ellipse in va vue in order to make a rounded halfway down my screen. I can get the ellipse in question but I can't center my svg......
my svg component :
const SvgComponent = props => (
<Svg
height="50%"
width="100%"
>
<Ellipse
cx="185"
cy="145"
rx="200"
ry="130"
stroke="black"
strokeWidth="2"
fill="white"
/>
</Svg>
)
and my view:
<View style={{backgroundColor: '#3C4550', flex:1, height:'100%', width:'100%', justifyContent: 'center', }} >
<View style={{ height: '50%' , width: '100%', justifyContent: 'center', alignItems: 'center' ,backgroundColor: '#FFF'}}>
<Image style={{height: '40%', width:'45%', backgroundColor:'grey', borderRadius: 80 }}/>
</View>
<SvgComponent />
</View>
I tried a lot of things, even with a simple view but I can't get the expected result, having my screen split in two with the bottom of the rounded top part
An idea ?

SVG Knockout text styling issue: unexplained cropped bottom

I've tried to build a react component for knockout text and I run into a styling issue I can't explain to myself.
Here is my attempt.
const styles = {
container: {
backgroundSize: "cover",
backgroundImage: "url(http://brokensquare.com/Code/assets/landscape.jpg)",
padding: "20% 20%"
},
knockout: {
borderRadius: 200,
overflow: "hidden"
}
};
const Knockout = ({ text, style }) => {
const s = style || {};
return (
<div style={styles.knockout}>
<svg viewBox="0 0 200 25">
<rect
fill={s.backgroundColor || "rgba(0,0,0,0.6)"}
x="0"
y="0"
width="100%"
height="100%"
mask="url(#knockout-text)"
/>
<mask id="knockout-text">
<rect fill="#fff" x="0" y="0" width="100%" height="100%" />
<text y="70%" fill="#000" textAnchor="middle" x="50%">
{text}
</text>
</mask>
</svg>
</div>
);
};
const App = Radium(() => (
<div>
<div style={styles.container}>
<Knockout style={{}} text={"VERY INSPIRATION"} />
</div>
</div>
));
As you can see the bottom is cropped for some reason, instead of having the side completely rounded, drawing half a circle. Can anyone here see why and how I could fix this ? Thanks.

add this css, it will work
svg {
display: block
}
you can check below codesandbox
https://codesandbox.io/s/71qxyx6m86
I added styles as below
render(
<div>
<App />
<Style
rules={{
"*": {
margin: 0,
padding: 0,
boxSizing: "border-box"
},
svg: {
display: "block"
}
}}
/>
</div>,
document.getElementById("root")