Javascript 多个多边形具有相同的渐变-SVG
我正在使用一个脚本创建多座山,该脚本将多边形附加到SVG文件中 我可以从渐变中定义多边形应使用的百分比吗?还是有更好的方法来做到这一点 这将是我的mountains.js,它获取点并附加它Javascript 多个多边形具有相同的渐变-SVG,javascript,svg,polygon,gradient,Javascript,Svg,Polygon,Gradient,我正在使用一个脚本创建多座山,该脚本将多边形附加到SVG文件中 我可以从渐变中定义多边形应使用的百分比吗?还是有更好的方法来做到这一点 这将是我的mountains.js,它获取点并附加它 $(function () { $.getJSON('../data/mountains-points.json', function (data) { for (let layer of data) { let result = ''; for (let point
$(function () {
$.getJSON('../data/mountains-points.json', function (data) {
for (let layer of data) {
let result = '';
for (let point of layer.path) {
result += point.x + ',' + point.y + ' ';
}
$('#mountains').append('<polygon style="stroke:black;stroke-width:10;" fill="url(#black_white)" class="mountains" xmlns="http://www.w3.org/2000/svg" points="' + result + '" />');
}});});
$(函数(){
$.getJSON('../data/mountains points.json',函数(数据){
对于(让数据层){
让结果=“”;
对于(让层的点。路径){
结果+=点x+','+点y+';
}
$(“#山脉”)。追加(“”);
}});});
这是我的SVG文件
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="100%"
height="100%" xmlns="http://www.w3.org/2000/svg"
version="1.1">
<script type="text/javascript" xlink:href="../libs/jquery-3.3.1.min.js"/>
<script type="text/javascript" xlink:href="../js/mountains.js"/>
<defs>
<linearGradient id="black_white" x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
<stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1"/>
</linearGradient>
</defs>
<g id="mountains">
</g>
</svg>
当前,渐变设置
gradientUnits=“userSpaceOnUse”
。这意味着您为渐变向量定义的百分比是相对于视口的。如果改为设置gradientUnits=“objectBoundingBox”
,则百分比将相对于引用元素的边界框,并且
<linearGradient id="black_white" x1="0%" y1="0%" x2="0%" y2="100%"
gradientUnits="objectBoundingBox">
将定义从边界框左上角到左下角的渐变向量。我认为你所说的“多边形应该从渐变中使用多少百分比”
您甚至可以保留gradientUnits
属性,因为objectBoundingBox
是默认值