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

Question

下面第一张图片是“浏览器 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。

Answer 1

也许这可以帮助你https://groups.google.com/forum/#!topic/prawn-ruby/kiiUAV_IFpE

Prawn pdf 对于任何类型的自定义 pdf 生成都非常方便

http://prawnpdf.org/manual.pdf

http://prawnpdf.org/docs/0.11.1/Prawn/Graphics.html