Question

我到处搜索，我不明白/找不到我想做的事。我有2个svg文件代表某些由Visual Paradigm为UML生成的UML图，它们有类似的对象。例如＆＃39; FileSource.svg＆＃39;和＆＃39; FileDestination.svg＆＃39;，他们都有一个对象＆＃39; A＆＃39;谁在各自的不同位置。

我希望你点击“A＆＃39; A＆＃39;在＆＃39; FileSource.svg＆＃39;返回＆＃39; A＆＃39;在＆＃39; FileDestination.svg＆＃39;在A＆＃39; A＆＃39;查看图表中的位置＆＃39; FileDestination.svg。

以下是jsfiddle：http://jsfiddle.net/jim987/rJk54/ 但我不知道如何使用jsfiddle创建2个文件，因此链接部分无法正常工作..

首先我尝试链接类似的对象，图中有一个对象的代码：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg fill-opacity="0" xmlns:xlink="http://www.w3.org/1999/xlink" color-rendering="auto" color-interpolation="auto" stroke="rgb(0,0,0)" text-rendering="auto" stroke-linecap="square" width="1267" stroke-miterlimit="10" stroke-opacity="0" shape-rendering="auto" fill="rgb(0,0,0)" stroke-dasharray="none" font-weight="normal" stroke-width="1" height="626" xmlns="http://www.w3.org/2000/svg" font-family="&apos;Dialog&apos;" font-style="normal" stroke-linejoin="miter" font-size="12" stroke-dashoffset="0" image-rendering="auto">
<defs id="genericDefs"/>
<g>
    <defs id="defs1">
        <clipPath clipPathUnits="userSpaceOnUse" id="clipPath7">
            <path d="M-7 -7 L101 -7 L101 51 L-7 51 L-7 -7 Z"/>
        </clipPath>
        <clipPath clipPathUnits="userSpaceOnUse" id="clipPath10">
            <path d="M0 0 L90 0 L90 15 L0 15 L0 0 Z"/>
        </clipPath>
    </defs>
    <g font-size="11" transform="translate(1173,2)" fill-opacity="1" fill="rgb(255,192,255)" text-rendering="geometricPrecision" font-family="sans-serif" stroke="rgb(255,192,255)" font-weight="bold" stroke-opacity="1">
        <a xlink:href="FileDestination.svg#A_Object_FileDestination" xlink:title="object definition">
            <rect x="0" width="90" height="40" y="0" clip-path="url(#clipPath7)" stroke="none"/>
        </a>
    </g>
    <g font-size="11" stroke-linecap="butt" transform="translate(1173,2)" fill-opacity="1" fill="black" text-rendering="geometricPrecision" font-family="sans-serif" stroke-linejoin="round" stroke="black" font-weight="bold" stroke-opacity="1" stroke-miterlimit="0">
        <rect fill="none" x="0" width="90" height="40" y="0" clip-path="url(#clipPath7)"/>
    </g>
    <g font-size="11" transform="translate(1173,2)" fill-opacity="1" fill="black" text-rendering="geometricPrecision" font-family="sans-serif" stroke="black" font-weight="bold" stroke-opacity="1">
        <a xlink:title="object def">
            <text x="21" xml:space="preserve" y="12" clip-path="url(#clipPath10)" stroke="none">Object A</text>
        </a>
        <line y2="12" fill="none" x1="21" clip-path="url(#clipPath10)" x2="66" y1="12"/>
    </g>
</g>
</svg>

FileDestination.svg中的对象A：

<g font-size="11" transform="translate(712,44)" fill-opacity="1" fill="rgb(255,192,255)" text-rendering="geometricPrecision" font-family="sans-serif" stroke="rgb(255,192,255)" font-weight="bold" stroke-opacity="1">
    <rect id="A_Object_FileDestination" x="0" width="90" height="40" y="0" clip-path="url(#clipPath13)" stroke="none"/>
</g>

问题是：当我创建此链接时，我的矩形颜色变为黑色..你知道为什么吗？

还可以将我的对象与定义的变换链接起来吗？（我在doc中看到了）像这样： FileDestination.svg＃svgView（变换（平移（712,44）））因为我为每个矩形添加了id，所以当生成svg文件时，没有任何id，只有变换。

在FileDestination中A的转换对应的转换，但是当我尝试它时，我的图表前面只有一个空白..

最后，我不知道如何制作动画来定位链接的目的地。当然在JavaScript或d3.js？用actionListener？但怎么样？因为对象不在同一页面中。而且我不知道如何处理对象不在同一页面中的事实。

感谢您提前回答：））

SVG在不同的SVG文件中链接rect并为它们设置动画

0 个答案: