Position SVG's in relation to one another

I have two SVG's and I'm looking to position the second SVG in the top right corner of the first SVG.

In this example, I want to place the exclamation SVG in the TOP RIGHT corner of the first SVG. Can someone provide guidance on what changes I need to make to the code? I've been attempting this but each time the SVG ends up misaligned. Any assistance would be greatly appreciated.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   ...
   </svg>

    <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     ...
    </svg>
</body>

</html>

javascripthtmlcsssvg

Answer №1

To provide clarity, I have opted to simplify the version of your pen that I am using.

The second SVG element is being transformed into a <symbol> within the first SVG element. I then utilize the symbol like so: 

 <use xlink:href="#s" width="5" height="5" />

With the viewBox attribute in the symbol, I can assign width and height attributes to the use element. To position the use element, x and y attributes can be utilized.

To position the use element in the top right corner, I set the x attribute as x="12", derived from the calculation 17 - 5.

Wondering how these numbers were determined? Well, 17 represents the svg element's width in user units, as it is the third value in the viewBox (viewBox="0 0 17 17). On the other hand, 5 signifies the width of the <use> element in user units.

<svg width="18.035334mm" height="18.035334mm" viewBox="0 0 17 17" id="svg13826">
  <defs id="defs13820">
    <symbol id="s" viewBox="0 0 45.311 45.311">
      <path fill="#FFBF00" d="M22.675,0.02c-0.006,0-0.014,0.001-0.02,0.001c-0.007,0-0.013-0.001-0.02-0.001C10.135,0.02,0,10.154,0,22.656
        c0,12.5,10.135,22.635,22.635,22.635c0.007,0,0.013,0,0.02,0c0.006,0,0.014,0,0.02,0c12.5,0,22.635-10.135,22.635-22.635
        C45.311,10.154,35.176,0.02,22.675,0.02z M22.675,38.811c-0.006,0-0.014-0.001-0.02-0.001c-0.007,0-0.013,0.001-0.02,0.001
        c-2.046,0-3.705-1.658-3.705-3.705c0-2.045,1.659-3.703,3.705-3.703c0.007,0,0.013,0,0.02,0c0.006,0,0.014,0,0.02,0
        c2.045,0,3.706,1.658,3.706,3.703C26.381,37.152,24.723,38.811,22.675,38.811z M27.988,10.578
        c-0.242,3.697-1.932,14.692-1.932,14.692c0,1.854-1.519,3.356-3.373,3.356c-0.01,0-0.02,0-0.029,0c-0.009,0-0.02,0-0.029,0
        c-1.853,0-3.372-1.504-3.372-3.356c0,0-1.689-10.995-1.931-14.692C17.202,8.727,18.62,5.29,22.626,5.29
        c0.01,0,0.02,0.001,0.029,0.001c0.009,0,0.019-0.001,0.029-0.001C26.689,5.29,28.109,8.727,27.988,10.578z" />

    </symbol>
  </defs>

  <g id="g70" transform="translate(15,-4)">

    <path id="path3055" d="m -6.8492015,4.2724668 a 1.1191255,1.1099671 0 0 0 -0.4288818,0.1085303 l -5.8524037,2.7963394 a 1.1191255,1.1099671 0 0 0 -0.605524,0.7529759 l -1.443828,6.2812846 a 1.1191255,1.1099671 0 0 0 0.151943,0.851028 1.1191255,1.1099671 0 0 0 0.06362,0.08832 l 4.0508,5.036555 a 1.1191255,1.1099671 0 0 0 0.874979,0.417654 l 6.4961011,-0.0015 a 1.1191255,1.1099671 0 0 0 0.8749788,-0.416906 L 1.3818872,15.149453 A 1.1191255,1.1099671 0 0 0 1.5981986,14.210104 L 0.15212657,7.9288154 A 1.1191255,1.1099671 0 0 0 -0.45339794,7.1758396 L -6.3065496,4.3809971 A 1.1191255,1.1099671 0 0 0 -6.8492015,4.2724668 Z" style="fill:#b388ff" />

  </g>


  <use xlink:href="#s" width="5" height="5" x="12" />
</svg>

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

Implementing an API route to access a file located within the app directory in Next.js

Struggling with Nextjs has been a challenge for me. Even the most basic tasks seem to elude me. One specific issue I encountered is with an API call that should return 'Logged in' if 'Me' is entered, and display a message from mydata.tx ...

javascriptnext.jsroutes

Transforming a Nestjs string object into JSON data

I need to convert this to JSON format. I attempted to use JSON.parse(), but encountered an error. "{"status":"00","message":"OK","access_token":"2347682423567","customer":{"name":"John Doe","address":"Mr. John Doe 34 Tokai, leaflet. 7999.","util":"Demo Ut ...

javascriptnode.jsjsonnestjs

In JS/JSON, a new line of data is generated every hour

Recently, I have been experimenting with DiscordJS and exploring its logging functionality. I am aware that the method I am using is outdated and may not be the most secure for actively changing data, but I am intrigued. let count = JSON.parse(fs.readFile ...

javascriptnode.jsjsondiscord.js

Avoid allowing text to spill out of the designated container

Hey there, I've run into this issue twice now and I can't seem to find a solution for the second occurrence. The first time it happened with an image, I used max-height and width to prevent it from overflowing the div when zoomed in. But now, for ...

htmlcss

Is there a way to display two cards side by side in mobile view?

On a desktop view, 2 cards are displayed in a row. I would like them to also appear in a row on mobile view. I tried using col-sm-4 but it's not working. How can I get the cards to display in a row on mobile view so that I can see both the product pho ...

htmlcssbootstrap-4

Creating a 2D image of a Three.js scene in JPG format: Is it possible?

I am working with a three.js scene that includes rendering a 3D cube. The code snippet for the scene setup is shown below: var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHe ...

javascripthtmlthree.jswebgl

Having issues with the Email type in the JQuery Validation Plugin?

Recently, I set up a Grunt file to consolidate all my libraries and code into a single JS file for inclusion in my website. However, after adding the JQuery Validate plugin (http://jqueryvalidation.org/), I noticed that it's not working as expected. I ...

javascriptjqueryjquery-validate

Should Angular libraries be developed using Typescript or transpiled into JavaScript?

Currently, I am in the process of developing a library that will be available as an Angular module through npm. The library itself has been written using typescript. Everything was functioning perfectly up until Angular version 5.0.0, but after this update ...

javascriptangularjsnode.jsangulartypescript

Is there a way to use a Google Chrome command line switch to simulate the dimensions of a

Seeking information on the available Google Chrome command line switches for emulating device sizes. Specifically, I need to test a component that utilizes CSS @media queries for min-device-width/min-device-height. Previous attempts with --window-size an ...

cssgoogle-chromeselenium-webdriverselenium-chromedriver

Retrieving exclusive npm packages from an npmjs user

I am currently facing a challenge with transferring all of our npm modules from npmjs.com to a new location. The issue is that our modules are saved under a private npm user account, making it difficult for me to programmatically access and consume all the ...

javascriptnpmnpm-registry

Unauthenticated user attempting to send a post request via React JS without proper authentication

Currently, I am working on a project where I am following a video tutorial that demonstrates how to authenticate a user using node and passport JS. The tutorial itself uses Hogan JS as its view engine, but I have decided to implement React as my front end ...

javascriptnode.jsmongodbreactjspassport.js

What is the best way to retrieve the value of an object in PHP?

There seems to be an issue with retrieving the value of an object. When attempting to get the object value, it appears empty. However, when simply echoing the object, there is content and not null. I'm struggling to understand how to access that value ...

phphtml

Ensure that TypeScript compiled files are set to read-only mode

There is a suggestion on GitHub to implement a feature in tsc that would mark compiled files as readonly. However, it has been deemed not feasible and will not be pursued. As someone who tends to accidentally modify compiled files instead of the source fil ...

javascripttypescriptbuildfilesystems

Using GraphQL to set default values in data within a useEffect hook can lead to never

Here's the code snippet that I'm working with: const [localState, setLocalState] = useState<StateType[]>([]); const { data = { attribute: [] }, loading } = useQuery<DataType>(QUERY, { variables: { id: client && client.id ...

javascriptreactjstypescriptgraphqlreact-hooks

Guide to customizing color themes using Twitter Bootstrap 3

Recently, I dove into the world of Twitter Bootstrap 3 without any prior experience with earlier versions. It's been a learning curve, but I managed to set up a WordPress theme using it as the framework. All my elements are in place, but they all see ...

htmlcsswordpresstwitter-bootstraptwitter-bootstrap-3

Connect your HTML page to your CHtml page

Can anyone guide me on how to link a button in an HTML page to a chtml page within an ASP MVC project? image description here ...

htmlasp.net-mvc

Exploring the possibilities of querying Firestore data with dynamic user input

I am facing an issue with my code and struggling to find the right solution. My goal is to build a filter that, upon clicking on each option, will automatically fetch data from firestore. https://i.sstatic.net/ktLuE.png Within my Redux Saga, I have the ...

javascriptreactjsfirebasegoogle-cloud-firestore

Having trouble inputting text into input field using ReactJS

I am currently facing a challenge while attempting to modify the value of an input field using ReactJS. The issue I am encountering is the inability to input values into the field. After reviewing several other queries, it appears that simply changing the ...

javascriptreactjs

Receiving alerts about props passed in MUI styled components triggering React's lack of recognition

I have a unique component design that requires dynamic props to determine its styling. Here is an example: const StyledTypography = styled(Typography)( ({ myColor = "black", isLarge = false }) => ({ "&&": { fontSi ...

javascriptreactjsmaterial-uiemotion

What is the best way to transform React API data into props that can be utilized in different components?

I've been struggling with this issue for quite some time now, unable to understand how to manipulate the data in a way that allows me to use it in other components. Although I can display the data correctly, I'm advised to structure it within a f ...

javascriptreactjs