SVG for PDF does not work properly in Rails 5.0

Question

The first image below is Browser View, and the second is PDF View.

SVG to PDF does not work properly, I set the value stroke-dashoffsetdynamically and works fine in the browser, but when I create the PDF it does not work.

Browse Browser

PDF view

And here is the code I used:

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

I am using Rails 5.

Answer 1

Maybe this will help you https://groups.google.com/forum/#!topic/prawn-ruby/kiiUAV_IFpE

Prawn pdf is very convenient for any type of PDF creation.

http://prawnpdf.org/manual.pdf

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

Answer 2

, JavaScript PDF. - PDF-, JavaScript, JavaScript , SVG.

Update:

, javascript - strokeDashoffset . , javascript , ...

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

, <% %>, PDF. JavaScript SVG - :

(, , )

                    <% @count = 1 %>
                    <% @skills.each do |skill| %>
<%
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 ;
val = val * 20;

// calculate the percentage the same way as in the javascript...
// and store it in a variable

pct = ((100-val)/100)*c;
%>
                        <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="<%= pct %>"></circle>
                                </svg>
                            </div>
                            <p><%= skill.title %></p>
                        </div>
                    <% @count += 1 %>
                    <% end %>   

, "ruby" , stroke-dashoffset .

, , , . .