Skip to main content
 首页 » 编程设计

jquery之SVG 到 PDF 在 Rails 5.0 中无法正常工作

2026年09月08日2linjiqin

下面第一张图片是“浏览器 View ”，第二张图片是“PDF View ”。

SVG 到 PDF 无法正常工作，我动态设置 Stroke-dashoffset 值并且在浏览器上工作正常，但是当我生成 PDF 时它不起作用。

浏览器 View

PDF View

这是我使用的代码:

CSS

.svg circle { 
  stroke-dashoffset: 0; 
  //transition: stroke-dashoffset 1s linear; 
  stroke: #666; 
  stroke-width: 1em; 
} 
.svg .bar { 
  stroke: #33aaa3; 
} 
.cont { 
  display: block; 
  height: 200px; 
  width: 200px; 
  margin: 2em auto; 
  border-radius: 100%; 
  position: relative; 
} 
.cont:after { 
    border-radius: 100%; 
    content: attr(data-pct) "%"; 
    display: block; 
    font-size: 2em; 
    height: 160px; 
    left: 50%; 
    line-height: 160px; 
    margin-left: -80px; 
    margin-top: -80px; 
    position: absolute; 
    text-align: center; 
    top: 50%; 
    width: 160px; 
} 
.col-xs-3 > p { 
    text-align: center; 
}

HTML

<% if @skills.present? %> 
            <div class="filter_group skills_area"> 
                <h2 class="filter_title">SKILLS</h2> 
                <div class="panel-body"> 
                    <div class="row"> 
                        <% @count = 1 %> 
                        <% @skills.each do |skill| %> 
                            <div class="col-xs-3 "> 
                                <div class="cont" id="cont-<%= @count %>" data-pct="100"> 
                                    <svg class="svg"  width="200" height="200" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
                                      <circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0" stroke="#33aaa3"></circle> 
                                      <circle class="bar"  r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle> 
                                    </svg> 
                                </div> 
                                <p><%= skill.title %></p> 
                            </div> 
                        <% @count += 1 %> 
                        <% end %>    
                    </div> 
                </div> 
            </div> 
        <% end %>

jQuery

<% @count = 1 %> 
    <% @skills.each do |skill| %> 
    <script> 
        $(document).ready(function() { 
            var val = <%= current_user.profile ? rating_by_skill(current_user.profile.id, skill.id) ?  number_with_precision(rating_by_skill(current_user.profile.id, skill.id), :precision => 2) : 0 : 0 %> * 20; 
            var $circle = $('#cont-'+<%= @count %>).find('.svg .bar'); 
 
            if (isNaN(val)) { 
            val = 0;  
            } 
            else{ 
            var r = $circle.attr('r'); 
            var c = Math.PI*(r*2); 
 
            if (val < 0) { val = 0;} 
            if (val > 100) { val = 100;} 
 
            var pct = ((100-val)/100)*c; 
            //alert(pct); 
            $circle.css({ strokeDashoffset: pct}); 
 
            $('#cont-'+<%= @count %>).attr('data-pct',val); 
            } 
        }); 
    </script> 
    <% @count += 1 %> 
    <% end %>

我正在使用 Rails 5。

请您参考如下方法:


  文章来源：
  https://blog.windname.com/post/aejghg2b1.html
阅读延展