Stack Overflow
Stack Overflow

Questions tagged [svg-rect]

The element is a basic SVG shape that creates rectangles, defined by their corner's position, their width, and their height. The rectangles may have their corners rounded.

<rect>

The <rect> element is a basic SVG shape that creates rectangles, defined by their corner's position, their width, and their height. The rectangles may have their corners rounded.

An Example:

<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Simple rect element -->
  <rect x="0" y="0" width="100" height="100" />

  <!-- Rounded corner rect element -->
  <rect x="120" y="0" width="100" height="100" rx="15" ry="15" />
</svg>
13 questions
8
votes
5 answers

how to load Svg components in remix run application

I have some Svg files which i want to load as react components in remix run app. for example in create-react-app your could do something like this import { ReactComponent as Logo } from './logo.svg'; function App() { return (
{/*…
hannad rehman
  • 4,133
  • 3
  • 33
  • 55
6
votes
1 answer

Finding all new coordinates of rotated SVG rectangle using JavaScript

I am trying to find the rotated svg rectangle coordinates. For example, Before rotation In this SVG rect, i can calculate all 4 corners as mentioned…
Santhosh
  • 91
  • 4
2
votes
1 answer

Use SVGR and Material UI together

i'm trying to use SVGR to convert my svg into react components and i need to use of Material UI and pass the converted component as a prop to it. nothing wrong with this yet. but, SVGR saves these component in a folder called svgCom for…
Amir Rezvani
  • 1,262
  • 11
  • 34
1
vote
0 answers

React native and SVG image

import {StyleSheet, Text, View} from 'react-native'; import React from 'react'; import Phone from '../assets/images/icons/phone.svg'; const Background = () => { return ( Background
Siddhant Shelake
  • 21
  • 3
1
vote
1 answer

I use SVG files as a component with "@svgr/webpack", How to use next/image module with it

In some places, I need to import my SVG file as a component, to have a control on it ( change style for example, change the fill color of the SVG element ) I used SVGR for that, and in other places, I want to use the SVG file as a normal image and…
Mina
  • 14,386
  • 3
  • 13
  • 26
1
vote
2 answers

How to click on a rect tag in a bar graph using Selenium

I have bar graph in a website and need to click on it. Using developer tools, I am getting below…
Dcook
  • 899
  • 7
  • 32
1
vote
1 answer

How to add a click event inside a shape in a SVG?

In this demo below If you click on the stroke the alert is triggered, How can I make it in such a way that even if they click anywhere inside the rectangle and I alerts. const svg = document.querySelector('#svg'); const svgNS =…
dota2pro
  • 7,220
  • 7
  • 44
  • 79
1
vote
2 answers

How to access to 'rect' type element through Selenium-Python

There is a rect object in the dom: I am trying to search it with following code: WebDriverWait(driver,…
Ulysses
  • 5,616
  • 7
  • 48
  • 84
0
votes
1 answer

NX monorepo (@nrwl) can no find .svgr config file inside of lib directory

I am new to NX Monorepo with 2 separate react applications. need to have an icons lib to share between both of these apps. I change the project.json of icons lib and add svg command like so: { "name": "icons", "$schema":…
Amir Rezvani
  • 1,262
  • 11
  • 34
0
votes
1 answer

How to create a rectangle with two rounded corners across the top?

How do I make two rounded cornered rectangle at the top left edge and top right edge preferably as an SVG rectangle? Is the only way to do this is to convert the rectangle to a path? The reason I do NOT want to use a path is because if I set the…
1.21 gigawatts
  • 16,517
  • 32
  • 123
  • 231
0
votes
1 answer

Resize An Existing Rectangle On Mouse Hover

I tried to follow a tutorial and finally came to a solution, almost. Here's the link for stackblitz - Resize SVG Rectangle So here's the scenario, a rectangle is drawn using SVG with default perimeters that's working fine. My requirement is to…
AT-2017
  • 3,114
  • 3
  • 23
  • 39
0
votes
1 answer

Save images to PDF - images within SVG elements are blurry, whereas images in are sharp

See reproduced example here - https://codepen.io/canovice/pen/eYRmYKR - command + P to print, I've taken this screenshot of the print/pdf output: Problem: On web, both images are sharp. On print and save to PDF, the logo in the tag remains…
Canovice
  • 9,012
  • 22
  • 93
  • 211
0
votes
1 answer

SVGR React Native .svg file

I have a confusing .svg file, where vectors are created with strokes and fill. And I want to customize my local .svg file's color. For example if I write My React Native will change real…
alexandr.mirzoyan
  • 17
  • 2
  • 5