时间戳

首页 > 解决方案 > SVG定义继承

svg - SVG定义继承

问题描述

请看eaExperiment。我想做一个定义，它需要StartArrow定义并将其旋转 180 度。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="450" height="400" version="1.1">
  <style type="text/css">
    <![CDATA[
      rect {fill:white; stroke: black; stroke-width: 1;}
      text {fill: black; font-family: sans-serif; font-size: 10pt}
      line {stroke:black; stroke-width:2}
    ]]>
  </style>
  <defs>
    <marker orient="auto" refY="0.0" refX="0.0" id="StartArrow" style="overflow:visible;">
      <path style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1" d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z " />
    </marker>
    <use id="eaExperiment" href="#StartArrow" transform="rotate(180)" />
    <marker orient="auto" refY="0.0" refX="0.0" id="EndArrow" style="overflow:visible;">
      <path style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1" d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z " transform="rotate(180)" />
    </marker>
    <svg id="Box">
      <rect width="100" height="85" x="1" y="1" />
      <text x="5" y="20">The box</text>
      <svg x="10" y="25">
        <rect width="70" height="50" x="1" y="1" />
        <text x="5" y="20">Box</text>
        <text x="5" y="40">Contents</text>
      </svg>
    </svg>
  </defs>
  <svg>
    <svg x="10" y="120">
      <rect width="100" height="50" x="1" y="1" />
      <text x="5" y="20">Data</text>
      <text x="5" y="40">source</text>
    </svg>
    <svg x="150">
      <use href="#Box" y="1" />
      <use href="#Box" y="100" />
      <use href="#Box" y="200" />
    </svg>
    <svg x="300" y="120">
      <rect width="100" height="50" x="1" y="1" />
      <text x="5" y="20">Database</text>
      <text x="5" y="40">server</text>
    </svg>
    <line x1="100" y1="120" x2="148" y2="40" style="marker-end:url(#EndArrow)" />
    <line x1="110" y1="150" x2="147" y2="150" style="marker-end:url(#EndArrow)" />
    <line x1="100" y1="170" x2="148" y2="240" style="marker-end:url(#EndArrow)" />
    <line x1="254" y1="40" x2="297" y2="120" style="marker-start:url(#StartArrow); marker-end:url(#EndArrow)" />
    <line x1="250" y1="150" x2="297" y2="150" style="marker-start:url(#eaExperiment); marker-end:url(#EndArrow)" />
    <line x1="250" y1="240" x2="297" y2="170" style="marker-end:url(#EndArrow)" />
  </svg>
</svg>

我肯定做错了，但正确的方法是什么？

标签： svg

解决方案

您需要单独<marker>的元素，但它们的内容可以与<use>元素一起重复使用。例如像这样：

<defs>
  <path id="arrow" style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1" d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z " />
  <marker orient="auto" refY="0.0" refX="0.0" id="StartArrow" style="overflow:visible;">
    <use xlink:href="#arrow" />
  </marker>
  <marker orient="auto" refY="0.0" refX="0.0" id="EndArrow" style="overflow:visible;">
    <use xlink:href="#arrow" transform="rotate(180)" />
  </marker>
</defs>

（虽然不推荐使用xlink命名空间 with href，并且从实际角度来看，当前浏览器不再需要使用它，但为了其他渲染器，我倾向于仍然使用它，例如 Inkscape。）

推荐阅读