是否可以线性渐变填充SVG中的分组路径(通过jss事件上的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的评论 - 这里发生的事情是,代表国家的每个子组仍然应用其单独的梯度实例,而所有这些实例共享相同的坐标原点和用户空间相同的转换 - 所以在任何指向最终渲染,哪个渐变实例可见是无关紧要的.

需要进行两项调整:

1. [minor]您必须调整渐变定义的y1/y2偏移(或停止偏移) - 因为它们指的是整个地图的用户坐标空间,非洲仅覆盖定义的停靠点之间的渐变的一部分.尝试y1="50%"和y2="100%".

2. [medium]如果您查看定义国家/地区形状的svg g-elements,您会注意到其中一些元素会受到额外的翻译.它们有效地移动了用户坐标系,因此也适用于使受影响的国家形状在地图上看起来像斑点的梯度.这个spurios变换可能是用于创建地图的生成器中的动作的人工制品.可以通过将平移偏移添加到相应g元素内的路径元素中的每个绝对坐标来补救.因为这些路径是使用拼接在一起的部分的相对坐标来定义的,所以这减少了改变路径的d属性中的初始"M"和最终"C"命令的坐标.

我已经编写了一个临时perl脚本来规范化svg代码的结构,该代码表示​​实现上述修改的国家边界.请注意,这些改动也可以在js中相当方便地完成.这是结果.

如果您需要有关如何执行上述调整的其他信息,希望能帮助并给我留言.

PS:我刚刚注意到莫桑比克仍然没有从生成的输出中丢失 - 对于那个单一国家的形状,还指定了另一种翻译.这个小细节是今天晚些时候要添加的,但是......

结果http://collapsar.co.ohost.de/data/astcko.03.png