Question

我有这个SVG来实现文本渐变。如何使用jQuery更改font-size属性？

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="40" class="detail_val_svg">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#4FB6D7;stop-opacity:1" />
      <stop offset="100%" style="stop-coloR:#325FF3;stop-opacity:1" />
    </linearGradient>
  </defs>
  <text fill="url(#grad1)" font-size="34" font-family="Helvetica" x="0" y="28">
    MY TEXT HERE
  </text>
</svg>

Answer 1

$(document).ready(function() {
	$('svg text').css('font-size', 8);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="40" class="detail_val_svg">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#4FB6D7;stop-opacity:1" />
      <stop offset="100%" style="stop-coloR:#325FF3;stop-opacity:1" />
    </linearGradient>
  </defs>
  <text fill="url(#grad1)" font-size="34" font-family="Helvetica" x="0" y="28">
    MY TEXT HERE
  </text>
</svg>

Answer 2

您也可以使用$(document).ready(function() { $('svg text').attr('font-size', 12); });属性作为设置器。

{{1}}

http://jsfiddle.net/vraxwppz/

如何更改svg中文本元素的属性？

2 个答案: