Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Parse x y svg attributes #2399

Merged
merged 2 commits into from
Aug 9, 2015
Merged

Parse x y svg attributes #2399

merged 2 commits into from
Aug 9, 2015

Conversation

asturur
Copy link
Member

@asturur asturur commented Aug 9, 2015

To be parsed LATER for conflict of files.

Example svg:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" preserveAspectRatio="none" width="1000" height="1000" viewBox="-10 -50 700 950">

<svg preserveAspectRatio="none" x="12" y="12" width="300" height="400" style="fill: none;" viewBox="0 0 300 400">
    <rect x="2" y="2" width="100" height="80" fill="blue"/>
</svg>
<svg preserveAspectRatio="none" x="12" y="12" width="300" height="300" style="fill: none;" viewBox="0 0 250 300">
    <rect x="2" y="2" width="100" height="80" fill="red" opacity="0.5" />
</svg>
<svg preserveAspectRatio="none" x="-12" y="-12" width="300" height="300" style="fill: none;" viewBox="0 0 150 300">
    <rect x="2" y="2" width="100" height="80" fill="orange"/>
    <svg preserveAspectRatio="none" x="10" y="10" width="300" height="150" style="fill: none;" viewBox="0 0 200 300">
        <rect x="10" y="10" width="100" height="60" fill="red"/>
    </svg>
</svg>
<svg preserveAspectRatio="none" x="0" y="0" width="300" height="300" style="fill: none;" viewBox="0 0 250 250">
    <svg preserveAspectRatio="none" x="12" y="12" width="300" height="300" style="fill: none;" viewBox="0 0 300 300">
        <rect x="2" y="2" width="100" height="80" fill="green" opacity="0.1" />
    </svg>
</svg>
<svg preserveAspectRatio="none" x="0" y="170" width="320" height="360" style="fill: none;" viewBox="0 0 160 180">
    <rect x="10" y="10" width="10" height="60" fill="green"/>
</svg>
</svg>

rendered by browser
image

rendered by current kitchensinik
image

rendered with this patch
image

@asturur asturur mentioned this pull request Aug 9, 2015
Closed
asturur
asturur reviewed Aug 9, 2015
View reviewed changes
src/shapes/image.class.js

if (parsedAttributes.preserveAspectRatio) {
aspectRatioAttrs = parsedAttributes.preserveAspectRatio.split(' ');
preserveAR = fabric.util.parsePreserveARAttribute(parsedAttributes.preserveAspectRatio);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

put this code in external function because we need to reuse it also for svg tags and not only for image tags.

@asturur
Copy link
Member Author

asturur commented Aug 9, 2015

@kangax ready to merge.

kangax
kangax reviewed Aug 9, 2015
View reviewed changes
src/util/misc.js
* @param {string} attribute to be parsed
* @return {Object} an object containing align and meetOrSlice attribute
*/
parsePreserveARAttribute: function(attribute) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would change AR to AspectRatio. Yes, it's a bit long-ish, but AR just looks way too cryptic IMO.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok!

@asturur
Copy link
Member Author

asturur commented Aug 9, 2015

changed parsePreserveARAttribute to parsePreserveAspectRatioAttribute

kangax added a commit that referenced this pull request Aug 9, 2015
@kangax
Merge pull request #2399 from asturur/parse-x-y-svg-atttrs
7c81f46 
Parse x y svg attributes
@kangax kangax merged commit 7c81f46 into fabricjs:master Aug 9, 2015
@asturur asturur deleted the parse-x-y-svg-atttrs branch August 10, 2015 13:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@asturur @kangax