Distorted rendering issue #219
Description
Details
In our project, we are downloading SVG file from cloud storage.
After downloading the SVG file, we would get the svg's paths with this code
let paths = SVGBezierPath.pathsFromSVG(at: svgURL)
Next is that we would construct the end arrow with this code
private func createEndArrowLayer(from endArrowPaths: [SVGBezierPath]) -> [CAShapeLayer] {
endArrowPaths.map { endArrowPath in
let endArrowLayer = CAShapeLayer()
endArrowLayer.path = endArrowPath.cgPath
endArrowLayer.fillColor = UIColor.red.cgColor
endArrowLayer.strokeColor = CustomColors.quizGuideMainColor
endArrowLayer.lineWidth = 0.8
endArrowLayer.lineJoin = .round
endArrowLayer.lineCap = .round
return endArrowLayer
}
}
In a specific character, there are 2 end arrows.
The first end arrow renders completely fine.
But the second end arrow renders in a distorted manner.
Some comparisons between the two
The first end arrow has this code for the svg path.
<path id="end-01" d="M55.7 46.5s0-.1 0 0q.3.15.3.3l-.7 3.4 1.5 3.1c.1.1.1.2-.1.4-.1.1-.2.1-.4.1-1.8-1.2-4.4-2-6.2-2.5-.1 0-.2-.1-.2-.2s0-.3.1-.3c1.6-.8 4.1-2.4 5.4-4.1q.1-.2.3-.2" fill="#bae3f9" stroke-width="0"/>
The second end arrow has this code for the svg path.
<path id="end-02" d="M29.2 79.7s0-.2 0 0c.2 0 .4 0 .4.2l1.1 3.3 2.9 1.9c.1.1.2.2 0 .4-.1.1-.2.2-.3.2-2.1-.2-4.9.4-6.6 1.1-.1 0-.2 0-.3-.1s-.1-.3 0-.3c.9-1.5 2.3-4.2 2.6-6.3 0-.3.1-.4.2-.4" fill="#bae3f9" stroke-width="0"/>
When I try to render it in an online SVG Viewer, or a SVG Editing Tool, the character displays without problem.
Am I missing something? Please let me know since this is a really mysterious bug that I couldn't figure out 😅
Has my issue been reported? No
Specifications
- PocketSVG Version: 2.7.3
- Xcode Version: 15.2
- iOS/macOS Version: iOS 17