2015-09-21 3 views
0

У меня есть этот SVG для достижения градиента текста. Как изменить атрибут font-size с помощью jQuery?Как изменить атрибут текстового элемента внутри svg?

<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> 

ответ

2

$(document).ready(function() { 
 
\t $('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>

+0

Я не знаю, почему вы были downvoted. Это сработало для меня. И я понял, что мне не нужен javascript для моих медиазаписей, я могу использовать простой старый css ... Спасибо. –

1

Вы также можете использовать attr свойство как сеттер.

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

http://jsfiddle.net/vraxwppz/

Смежные вопросы