How change path and polyline in SVG?

Question

I have two icons in svg.

Updated:

one
two

First of all, is it possible to make this icons using same markup? For example:

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

Because i can operate only with classes. That mean that i want to change their styles in css and that why i want same markup for both icons.

Also i want remove cx="9" cy="9" from both icons, because this icon is part of the <rect /> and should be placed strictly on the verge of this <rect />. And this cx and cy move it sideways. If i just remove them, then icon become broken a bit. I need to change attributes of path and polyline also. How i can do it? Thank you

The two links point to identical markup. What is your point? — ccprog, Mar 23 '18 at 17:59
@ccprog that's the bad thing of including external links .. he's edting the code ... maybe because he got some answer and now all his answer is irrelevant to new comer. — Temani Afif, Mar 23 '18 at 18:17

Mark Schultheiss · Answer 1 · 2018-03-26T10:57:23.540

As for your re-use of SVG that part already has an answer here: Inline SVG in CSS

You can do a lot with this using just CSS for example:

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

score 0 · Answer 2 · answered Mar 23 '18 at 17:46

I don't know why, but if you want to remove cx="9" cy="9", you can use transform: translate()

<!-- Generator: 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>

I want to remove it because this icon is part of the `` and should be placed strictly on the verge of this ``. And this `cx` and `cy` move it sideways — mr__brainwash, Mar 23 '18 at 17:51

CPHPython · Answer 3 · 2018-03-26T16:08:59.860

You can position the shape where you want and reference the SVG through xlink:href in the shape's attributes definition along with a specific markup through the JointJS Devs plugin. E.g.:

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'
      },
    }
});

How change path and polyline in SVG?

3 Answers3