Using React Native to display an SVG path inside an SVG viewbox

I'm working on incorporating a barcode scanner viewfinder with an SVG icon to enhance its appearance. However, I am facing difficulty in making the path element within the SVG take up the full width and height of the SVG. In my React Native project, I am using SVGR to generate the icon. Here is how I set the dimensions of the SVG in the scan handler:

  const handleBarCodeScanned = ({ type, data, bounds }: BarCodeEvent) => {
    if (!bounds) return;
    const { origin, size } = bounds;
    setX(origin.x);
    setY(origin.y);
    setWidth(size.width);
    setHeight(size.height);
  };

Then, I use these dimensions inside the SVG as shown below:

import * as React from "react";
import Svg, { SvgProps, Path } from "react-native-svg";

export const ViewFinder = (props: SvgProps & { top: number; left: number }) => {
  const { width, height, top, left } = props;
  return (
    <Svg
      width={width}
      height={height}
      style={{
        borderColor: "green",
        borderWidth: 2,
        position: "absolute",
        left: 0,
        top: 0,
        width: "100%",
        height: "100%",
      }}
      fill="none"
      stroke="green"
      preserveAspectRatio="none"
      viewBox={`0 0 ${width} ${height}`}
    >
      <Path d="M6.13 1L6 16a2 2 0 0 0 2 2h15"></Path>
      <Path d="M1 6.13L16 6a2 2 0 0 1 2 2v15"></Path>
    </Svg>
  );
};

The original icon used is from Feather Icons - Crop icon . The code for the original icon looks like this:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-crop"><path d="M6.13 1L6 16a2 2 0 0 0 2 2h15"></path><path d="M1 6.13L16 6a2 2 0 0 1 2 2v15"></path></svg>

While the border color and borderWidth are set directly on the SVG itself, scaling works fine based on the container dimensions. I have specified viewBox and preserveAspectRatio, but the inner path is not scaling with the SVG. I have tried multiple icons, and the issue persists, indicating a possible misunderstanding of SVG on my part.

Any help or suggestions would be greatly appreciated. Thank you!

Answer №1

Typically, a viewBox is defined by four specific numbers that are independent of the width and height. This approach should help you achieve your desired outcome.

Given that your content remains constant in size, there is no need for your viewBox to vary either.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How should one correctly align various classes in a cascading manner within CSS?

Here is an interesting challenge - I want each of these buttons to have their background image change when hovered over. However, I'm struggling with the class setup in my code. I've been trying to understand how to distinguish between divs and c ...

Leverage a local JSON file in your React and Electron application

I recently developed an electron application using react.js that is primarily focused on displaying charts, utilizing chart.js for this purpose. The data for the charts needs to be updated monthly, as I receive new data each month from another department i ...

Container struggling to contain overflowing grid content items

While creating a grid in nextjs and CSS, I encountered an issue. Whenever I use the following code: display: grid; The items overflow beyond the container, even though I have set a maximum width. Instead of flowing over to the next row, the items just kee ...

What is the updated technique for creating a full-width HTML section in 2023?

In most web designs, the content is typically "contained" to be centered and limited by a maximum width: <!DOCTYPE html> <html> <body> <div id="container" style="width: 1000px; margin: 0 auto;"> ...

Add a JSON file containing an image path as a value into a CSS background property

I currently have a MongoDB database containing documents with 'img' values structured as follows: "img": "../folder/img.jpg" Would it be feasible to utilize this string in my CSS for modifying the background image? This is essential because I n ...

Tips on altering the location path when redirecting to a different page using window.location?

Is it a silly question to ask? I tried looking for the answer on Google but couldn't find it. I'm currently working on a website where users can upload photos or videos, using HTML, CSS, and JavaScript. On the homepage, when a user clicks on a ...

Using an AngularJS ng-repeat alias expression with multiple filters

As stated in the Angular ngRepeat documentation, the alias expression can only be used at the end of the ngRepeat: It's important to note that `as [variable name]` is not an operator, but rather a part of the ngRepeat micro-syntax and must be place ...

The _rfs.scss width rule in Angular-Bootstrap-NgBootstrap is overriding the column width of the col-rules

The Dilemma I am currently working on an Angular project that incorporates Bootstrap and ng-bootstrap. My intention is to utilize the grid system within this project, but I encountered some bugs along the way. When trying to render the following HTML/TS ...

Ruby Thin Server: An Unexpected ActionView Template Error

Encountering an issue when trying to deploy my project on Amazon Web Services and accessing the domain. ActionView::Template::Error (Command 'java -jar /home/ubuntu/.rvm/gems/ruby-2.1.10@silk/gems/yui-compressor-0.12.0/lib/yui/../yuicompressor-2.4.8 ...

In what part of my code should I integrate the .sort() method?

I am working on rendering a list of items in alphabetical order to the browser. I have previous experience using .sort() in other scenarios, but I am unsure about where to place it in this particular situation. In my current code, I initially placed the . ...

Tips for placing an icon within an input field

I'm struggling to place an icon inside an input tag, but it always appears at the bottom of the input. I initially tried using Bootstrap, but I ended up resorting to custom styles for this specific issue. Here's the HTML code: <d ...

Fancybox operates successfully when I manually include a class, yet fails to function when utilizing jQuery's .addClass() method

Below is a snippet of JS code that I use to add Fancybox classes to all hrefs on a webpage: $(function(){ //declaring target variable var $targetTable = $('.photo-frame a'); //looping through each table and adding the fancybox cla ...

Is there a way to seamlessly incorporate Django and react-router-dom together?

What is the process for configuring the Django urls.py and React Components for this setup? I need Django to display the homepage using the following urls file: urlpatterns = [ path('', views.index), ] Afterwards, React router should r ...

Place the delete and edit buttons on the right side of the card

I am trying to align the edit and delete buttons with the image and premise name on the same line. Both buttons should be placed on the right side and have the same size as the card. Currently, the layout looks like this: https://i.sstatic.net/sNikU.png ...

Replacing Data in Lists and Arrays

When fetching data from the database, I store it in the variable $groups. Each entry has a different created_at timestamp. Before returning the data to the view, I want to overwrite the created_at field in the collection and format it nicely using ->di ...

Encountering the error "Cannot read property 'header' of undefined" while conducting tests on Nodejs using supertest

In my server.js file, I have set up my express app. I tried to run a demo test in my test file using express, but unfortunately, the test did not run successfully. const request = require('supertest'); const express = require('express' ...

What could be the reason behind the validation failure of this Javascript code?

After implementing your recommendation, this is my current status: <script> function tick() { const React.element = ( '<div><marquee behavior="scroll" bgcolor="lightyellow" loop="-1" width="100%"> <i> <font color ...

Creating a webpage that supports multiple languages using either JavaScript or jQuery

I am currently developing a web application that will have support for multiple languages. To achieve this, I have created a table in my database with translations. However, I am unsure of how to populate the web application with these translations. My ide ...

Sorting a React map function based on two fields

I am new to React and I am trying to sort an array by two different dates: {folder.actions .sort((a,b) => { return a.date_actual - b.date_actual || a.date_sched - b.date_sched }) .map(action => { ... However, the code above is not work ...

Using Javascript jQuery to swap out a variable with a specific value

Looking for a way to make my Javascript jQuery code more flexible. $.post('/blah', { comment_id: 1, description: ... }); Is there a way to turn comment_id into a variable that can be easily changed on the go? UPDATE What I'm trying to ac ...