What is the process for modifying the path and polyline in an SVG file?

I have a pair of SVG icons that I am working with.

Recent Update:

  1. Icon One
  2. Icon Two

One question that I have is whether it is possible to create both icons using the same HTML markup? For instance, can I use something like:

<g>
  <circle ... />
  <path ... />
</g>
?

My main constraint is that I can only work with classes. This means that I want to be able to change their styles using CSS and therefore require the same markup for both icons.

I also need to remove the cx="9" cy="9" from both icons. These attributes are part of the <rect /> element and should be positioned along the edge of the rectangle. Adjusting the cx and cy values causes distortions in the icon. How can I achieve this without breaking the icons? Any assistance would be appreciated. Thank you.

htmlcsssvgjointjs

Answer №1

For those looking to reuse SVG, you can find a helpful answer here: Inline SVG in CSS

CSS offers various options for working with inline SVG elements, such as:

.firstxxx,
.secondxxx {
  position: relative;
  display: block;
  top: -1.1em;
  left: 6em;
}
.secondxxx circle{fill:blue;}

.containerthing {
  height: 4em;
}
<div class="containerthing">1. One
  <svg class="firstxxx" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="311.7px" height="311.5px" viewBox="0 0 311.7 311.5" enable-background="new 0 0 311.7 311.5"
    xml:space="preserve">
<defs>
</defs>
<g>
      <circle magnet="true" fill="#E88585" cx="9" cy="9" r="9"></circle>
      <g transform="translate(5.625000, 5.625000)" stroke="#F8F9FC">
        <path d="M0.548779871,6.31256521 L6.34043825,0.0386997062" transform="translate(3.444609, 3.175632) scale(-1, 1) translate(-3.444609, -3.175632) "></path>
        <path d="M0.548779871,6.31256521 L6.34043825,0.0386997062"></path>
      </g>
    </g>
</svg>
</div>
<div class="containerthing">2. Two
  <svg class="secondxxx" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="311.7px" height="311.5px" viewBox="0 0 311.7 311.5" enable-background="new 0 0 311.7 311.5"
    xml:space="preserve">
<defs>
</defs>
<g>
      <circle magnet="true" fill="#E88585" cx="9" cy="9" r="9"></circle>
      <g transform="translate(5.625000, 5.625000)" stroke="#F8F9FC">
        <path d="M0.548779871,6.31256521 L6.34043825,0.0386997062" transform="translate(3.444609, 3.175632) scale(-1, 1) translate(-3.444609, -3.175632) "></path>
        <path d="M0.548779871,6.31256521 L6.34043825,0.0386997062"></path>
      </g>
    </g>
</svg>
</div>

Answer №2

If you're looking to eliminate the cx="9" cy="9" attributes, one solution is to utilize the transform: translate() property

<!-- Generated by Adobe Illustrator 18.0.0, SVG Export Plug-In -->
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="311.7px" height="311.5px" viewBox="0 0 311.7 311.5" enable-background="new 0 0 311.7 311.5"
xml:space="preserve">
<defs>
</defs>
<g>
      <circle magnet="true" fill="#E88585" r="9" transform="translate(9, 9)"></circle>
      <g transform="translate(5.625000, 5.625000)" stroke="#F8F9FC">
        <path d="M0.548779871,6.31256521 L6.34043825,0.0386997062" transform="translate(3.444609, 3.175632) scale(-1, 1) translate(-3.444609, -3.175632) "></path>
        <path d="M0.548779871,6.31256521 L6.34043825,0.0386997062"></path>
      </g>
    </g>
</svg>

Answer №3

To place the shape in your desired location and link to the SVG using xlink:href within the shape's attribute definition, you can leverage a specific syntax with the JointJS Devs plugin. For example:

joint.shapes.devs.Model.define('app.MyWindow', {
    markup: `<image/><text/>`,
    position: {
      x: 100,
      y: 100
    },
    size: {
      width: 10,
      height: 10
    },
    attrs: {
      image: {
        width: 8,
        height: 8,
        'xlink:href': 'assets/my_svg.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

Can a new frame be created below an already existing frame in HTML?

My main.html file looks like this: ----- main.html---------------- <title>UniqueTrail</title> <script src="main.js"></script> <frameset rows='200,200'> <frame id='one' src="f ...

javascripthtmlapache-flex

What steps should I take to ensure that elements beneath a div are made visible?

I've been working on a unique project to create a website with "hidden text" elements. One of the cool features I've developed is a circular div that follows my mouse cursor and flips all text below it using background-filter in both CSS and Jav ...

javascripthtmljquerycss

What can I do to prevent the border from breaking apart when I zoom in?

To address the problem of the 1px black border at the bottom of the header being cut off, try zooming into the page and scrolling right. How can this issue be resolved? ...

htmlcssxhtmlborder

I attempted to apply vertical-align and color properties to the static_nav div, but they didn't have any effect. Could this be due to its placement within the header? What steps should I take to resolve this issue?

<!DOCTYPE HTML> <html lang ="en"> <meta charset = "utf-8" /> <head> <title>Sample Page</title> <link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" /> </head> <body> &l ...

htmlcssvertical-alignment

What could be causing OnChange to malfunction within Formik?

Formik in React is giving me trouble while working on a dummy app. When I set the value prop for the input boxes, I am unable to type anything. However, if I remove the value props, I can type but it doesn't reflect in the values when submitting. Tak ...

htmlreactjsformik

What is the process for invoking a websocket from an HTML client?

I have created a WCF Service using netHttpBinding binding and it is hosted on IIS 8 (Windows Server 2012). The interfaces for the service are as follows: [ServiceContract(CallbackContract = typeof(IDuplexCallbackContract))] public interface IHelloWebSocke ...

javascripthtmlwcfwebsocket

I'm having trouble displaying the Facebook page plugin on my HTML website

I encountered a minor issue. I attempted to add the "Facebook page plugin" on a test website. I copied the code from the official Facebook plugin page: <!-- 1. Include the JavaScript SDK on your page once, ideally right after the opening <body> t ...

htmlfacebookplugins

The responsive class seems to be malfunctioning within the Laravel 5.3 framework

I have a project that involves Laravel and Vue.js. In my Laravel project, I am importing Bootstrap CSS using the following line: // Bootstrap @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap"; This import is done in the app.scss file. ...

csstwitter-bootstraplaravelnpmvue.js

Preserving the HTML tag structure in lxml - What is the best method?

Here is a url link that I have: I am attempting to extract the main body content of this news page using LXML with xpath: //article, however it seems to include content beyond the body tag As LXML modifies the HTML structure upon initialization, I am see ...

pythonhtmlxml

Adjust the position of an image in both the x and y axes based on the mouse hover location using jQuery

I am attempting to develop a unique interactive experience where an image placed within a container extends beyond its boundaries. The concept involves moving the image in the opposite direction of my mouse as I hover over the container. The speed and inte ...

jquerycssjquery-pluginshover

Height of CSS border-top

I'm facing an issue with setting the height of my top border. It seems like a traditional solution is not possible based on what I have read so far. However, I am determined to find a workaround for this problem. My goal is to have the border align at ...

htmlcss

Activate the last div within the identical class

When I make an ajax call to fetch more results and append them to the existing ones on the same page, I want to display a scrolling spinner while the contents are being fetched. I am adding a div at the bottom of the fetched results like this: <div cla ...

htmlajaxjquery

Using ngFor in Angular 6 to create a table with rowspan functionality

Check out this functional code snippet Desire for the table layout: <table class="table table-bordered "> <thead> <tr id="first"> <th id="table-header"> <font color="white">No.</font> </th> <th id="table-hea ...

javascripthtmlangularangular6

Incorporate a website link into an isotope filter

My filter configuration is as follows: <ul class="filters filter-portfolio"> <li><a href="#" class="selected animated" data-animation="fadeInUp" data-filter="*">All</a></li> <li><a hre ...

jqueryhtmljquery-isotope

Can a PHP file be used in the src attribute of an HTML5 audio element?

Within my PHP code, I am attempting to include an audio tag like this: '<audio src="song.php" />'.$fallback.'</audio>' I have experimented with various approaches in the "song.php" file, but unfortunately, none of them hav ...

phphtmlaudioattributessrc

The ng-controller directive is not functioning accurately

I attempted to execute the following basic HTML: <!DOCTYPE html> <html ng-app="tempApp"> <head> <script src="js_libs/angular/angular.min.js"></script> <script src="js_libs/angular/bootstrap.js"></script&g ...

javascripthtmlangularjs

Is there a way to customize the timepicker pop-up so that it extends the entire width of the parent form control

<FormControl fullWidth> <LocalizationProvider dateAdapter={AdapterDayjs}> <TimePicker views={["hours", "minutes", "seconds"]} label={t("StrategyManager.Select_Time")} value={timer} ...

cssreactjsmaterial-uistylingmui-x

Python Selenium - encountering issues with interactability of elements

Trying to complete the form on () is proving tricky for me. When I utilize Javascript, document.getElementsByName("userName")[0].value = "Hello", I am successful in entering text into a form. However, when I apply the same logic in Sel ...

pythonhtmlseleniumxpath

The code is malfunctioning on this site (yet functions perfectly on a different website)

So I have a question that may seem silly, but it's worth asking. I'm attempting to create a sticky div element that stays in place when you scroll past a certain point on the page. This is the script I have: <script type="text/javascript"> ...

javascriptjqueryhtmlcss

Modify the location of the input using jQuery

Hey there, I've got this snippet of HTML code: <div class='moves'> <div class='element'><input type='text' value='55' /></div> <input class='top' type='text&apo ...

javascriptjqueryhtmlcss