如何更改 SVG 中的路径和折线？答案

【问题标题】：How change path and polyline in SVG?如何更改 SVG 中的路径和折线？
【发布时间】：2018-03-23 17:39:04
【问题描述】：

我在 svg 中有两个图标。

更新：

首先，是否可以使用相同的标记制作此图标？例如：

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

因为我只能对类进行操作。这意味着我想在css 中更改它们的样式，这就是为什么我希望两个图标都使用相同的标记。

我还想从两个图标中删除cx="9" cy="9"，因为这个图标是<rect /> 的一部分，应该严格放在这个<rect /> 的边缘。而这个cx 和cy 把它移到一边。如果我只是删除它们，那么图标会有点损坏。我还需要更改path 和polyline 的属性。我该怎么做？谢谢你

【问题讨论】：

两个链接指向相同的标记。你的观点是什么？
@ccprog 包含外部链接是一件坏事......他正在编辑代码......也许是因为他得到了一些答案，现在他的所有答案都与新来者无关。
对不起，我更新了链接

标签： html css svg jointjs

【解决方案1】：

我不知道为什么，但是如果你想删除cx="9" cy="9"，你可以使用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>

【讨论】：

我想删除它，因为这个图标是<rect /> 的一部分，应该严格放在这个<rect /> 的边缘。而这个cx 和cy 把它移到一边

【解决方案2】：

至于您对 SVG 的重用，这里已经有了答案： Inline SVG in CSS

你可以用 CSS 做很多事情，例如：

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

【讨论】：

【解决方案3】：

您可以将形状放置在您想要的位置，并通过形状属性定义中的xlink:href 引用 SVG，并通过JointJS Devs plugin 引用特定标记。例如：

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

【讨论】：