2

誰かがこのコードの何が悪いのか教えてもらえますか？

HTML：

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>

<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<style type="text/css">@import "js/jquery.svg/jquery.svg.css";</style> 
<script type="text/javascript" src="js/jquery.svg/jquery.svg.js"></script>
<script type="text/javascript" src="js/svg.js"></script>

<body>
   <div id="svgintro" style="height:800px"></div>
</body>
</html>

JavaScript：

var defs=svg.defs();
svg.linearGradient(defs, 'gradient', [[0, 'white', 1], [1, 'red', 1]], 0, 0, 0, 100, {gradientUnits: 'userSpaceOnUse'});
svg.rect(20, 400, 1500, 40, 10, 10, {fill:'url(#gradient)'});

常に1色で表示されます。

ありがとうございました。

解決：

svg.linearGradient(defs, 'gradient', [['0%', 'white'], ['100%', 'red']], 20, 400, 20, 440, {gradientUnits: 'userSpaceOnUse'});
4

1 に答える 1

3

ここでの問題は、私が知る限り、のx1, y1, x2, y2属性linearGradientが絶対座標にあり、グラデーションを適用しているオブジェクトに相対的ではないことです。つまり、グラデーションはで終了しますy:100が、長方形の上部はで終了するy:400ため、グラデーションの赤い部分のみが適用されます。

例については、 http：//jsfiddle.net/nrabinowitz/VTKj2/1/を参照してください。これは、上部がにある長方形にy:20グラデーションが適切に適用されていることを示しています。

于 2012-01-10T21:38:34.250 に答える