Question

我在svg中有两个图标。

更新

one
two

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

<g> <circle ... /> <path ... /> </g>？

因为我只能在课堂上操作。这意味着我想在css中改变他们的风格，这就是为什么我想为这两个图标添加相同的标记。

此外，我想从两个图标中删除cx="9" cy="9"，因为此图标是<rect />的一部分，应严格放在此<rect />的边缘。这cx和cy将其横向移动。如果我只是删除它们，那么图标会被破坏一点。我还需要更改path和polyline的属性。我怎么能这样做？谢谢

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

Answer 2

至于你重复使用SVG，那部分已经有了答案： Inline SVG in CSS

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以将形状定位在所需的位置，并通过xlink:href在形状的属性定义中引用SVG以及特定标记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'
      },
    }
});

如何在SVG中更改路径和折线？

3 个答案: