javascript - 是否可以线性渐变填充 SVG 中的分组路径(通过 jQuery 事件上的 css 或 attr)

Question

我如何为 <g> 填充一个渐变？在 SVG 图像中而不是填充所有 <g> s 在选定的 <g> ？

在这种情况下，我想展示非洲，只填充一个从黄色到红色的渐变，但由于子组的原因，填充会产生许多渐变。

JavaScript:

<script type="text/javascript">
function svgOver() { 
    var what = $(this).attr("id");
    $("#world #"+what, svg.root()).attr("fill", "url(#red_black)"); 
} 
function svgOut() { 
    $(this).attr("fill", "");
}

...

$("#map").svg({ 
    loadURL: 'http://teszt.privilegetours.hu/skins/privilege/svg/worldmap.svg',
        onLoad: function(svg) { 
        $("#world > g", svg.root()).bind('mouseover', svgOver).bind('mouseout', svgOut).bind('click', svgZoom);
        },
    settings: {}
});

SVG:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" mlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="570px" height="300px" viewBox="146.605 71.42 570 300" enable-background="new 146.605 71.42 570 300" xml:space="preserve">

<defs>
    <linearGradient id="red_black" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
        <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
    </linearGradient>
</defs>

<g id="world" transform="scale(1)" fill="#AAAAAA" stroke="#FFFFFF" stroke-width="0.1">
    <g id="africa" name="africa"> // < i want to fill this
        <g id="er" transform="translate(-29.9017, -45.0745)"> // < instead of theese
            <path d="..."/>
        </g>
        <g id="yt"> // < instead of theese
            <path d="..."/>
        </g> 
        ...

我该如何解决这个问题？
如何在不添加另一个 <g> 的情况下解决此问题标记到原始图像？

Answer 1

您的问题可以通过将渐变坐标系设置为用户空间(而不是默认的对象边界框)来解决。

你可以试试

<defs>
    <linearGradient id="red_black" x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
        <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
        <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
    </linearGradient>
</defs>

解决方案并没有违背 e.nelson 的评论 - 这里发生的是代表国家的每个子组仍然应用了其单独的梯度实例，而所有这些实例共享相同的坐标原点和相同的转换 w.r.t 用户空间 -所以在最终渲染的任何时候，哪个渐变实例可见都没有关系。

需要进行两项调整:

1. [次要]您必须调整渐变定义的 y1/y2 偏移量(或停止偏移量)——因为它们指的是整个 map 的用户坐标空间，非洲仅覆盖定义停止点之间的部分渐变。试试 y1="50%" 和 y2="100%"。

2. [中]如果您查看定义国家/地区形状的 svg g-elements，您会注意到其中一些需要进行额外的翻译。它们有效地改变了用户坐标系，因此也适用于导致受影响的国家形状在 map 上看起来像 Blob 的梯度。这个 spurios 变换可能是用于创建 map 的生成器中的 Action 的产物。它可以通过将平移偏移量添加到相应 g 元素内的路径元素中的每个 绝对 坐标来补救。由于这些路径是使用缝合在一起的片段的相对坐标定义的，因此这减少了更改路径的 d 属性中初始“M”和最终“C”命令的坐标。

我编写了一个临时 perl 脚本来规范表示实现上述修改的国家边界的 svg 代码的结构。请注意，这些更改也可以在 js 中相当方便地完成。 This is the result .

希望对您有所帮助，如果您需要有关如何执行上述调整的更多信息，请给我留言。

附言:我只是注意到生成的输出中仍然缺少莫桑比克 - 对于那个国家的形状，还指定了另一个翻译。这个小细节将在今天晚些时候添加，但是......