Below you will find two images: the first one is displayed in a browser view, while the second one shows a PDF view.
The issue lies with the SVG to PDF conversion. I have dynamically set the stroke-dashoffset value, which works correctly in the browser but fails when generating a PDF.
Browser View
https://i.sstatic.net/XXYLK.png
PDF View
https://i.sstatic.net/jIqOz.png
Here is the CSS code I have implemented:
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 utilizing Rails 5 for this project.