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.

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

Make cx, cy default to 0 #7

Closed
wants to merge 1 commit into from
Closed

Make cx, cy default to 0 #7

wants to merge 1 commit into from

Conversation

stuaxo
Copy link
Contributor

@stuaxo stuaxo commented Jul 16, 2015

Fixed to match the spec at

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/cx

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/cy

Means it can load the wikipedia smiley, though rendering is not correct yet

There are some things that don't display yet:

http://imgur.com/BWa5G3G

The right eye - this seems to be the 'use' tag not working.the gradient effect seems to be 'radialGradient' which is not implemented yet.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg>
<svg version="1.1" baseProfile="full" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" zoomAndPan="magnify"
   id="Test File"
   viewBox="-21 -21 42 42"
   width="800"
   height="800">

<defs>
<radialGradient id="shine"
      cx=".2" cy=".2" r=".5" fx=".2" fy=".2">
  <stop offset="0" stop-color="white" stop-opacity=".7"/>
  <stop offset="1" stop-color="white" stop-opacity="0"/>
</radialGradient>
<radialGradient id="grad"
      cx=".5" cy=".5" r=".5" >
  <stop offset="0" stop-color="yellow"/>
  <stop offset=".75" stop-color="yellow"/>
  <stop offset=".95" stop-color="#ee0"/>
  <stop offset="1" stop-color="#e8e800"/>
</radialGradient>

</defs>

<circle r="20" stroke="black" stroke-width=".15" fill="url(#grad)"/>
<circle r="20" fill="url(#shine)"/>
<g id="right">
  <ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
  <path fill="none" stroke="black" stroke-width=".5" stroke-linecap="round" d="M 10.6,2.7 a 4,4,0 0,0 4,3"/>
</g>
<use xlink:href="#right" transform="scale(-1,1)"/>
<path fill="none" stroke="black" stroke-width=".75" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
</svg>

Fixed to match the spec at

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/cx

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/cy

Means it can load the wikipedia smiley, though rendering is not correct yet

There are some things that don't display yet:

http://imgur.com/BWa5G3G

The right eye - this seems to be the 'use' tag not working.the gradient effect seems to be 'radialGradient' which is not implemented yet.


```xml
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg>
<svg version="1.1" baseProfile="full" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" zoomAndPan="magnify"
   id="Test File"
   viewBox="-21 -21 42 42"
   width="800"
   height="800">

<defs>
<radialGradient id="shine"
      cx=".2" cy=".2" r=".5" fx=".2" fy=".2">
  <stop offset="0" stop-color="white" stop-opacity=".7"/>
  <stop offset="1" stop-color="white" stop-opacity="0"/>
</radialGradient>
<radialGradient id="grad"
      cx=".5" cy=".5" r=".5" >
  <stop offset="0" stop-color="yellow"/>
  <stop offset=".75" stop-color="yellow"/>
  <stop offset=".95" stop-color="#ee0"/>
  <stop offset="1" stop-color="#e8e800"/>
</radialGradient>
  
</defs>

<circle r="20" stroke="black" stroke-width=".15" fill="url(#grad)"/>
<circle r="20" fill="url(#shine)"/>
<g id="right">
  <ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
  <path fill="none" stroke="black" stroke-width=".5" stroke-linecap="round" d="M 10.6,2.7 a 4,4,0 0,0 4,3"/>
</g>
<use xlink:href="#right" transform="scale(-1,1)"/>
<path fill="none" stroke="black" stroke-width=".75" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
</svg>
```
@stuaxo
Copy link
Contributor Author

stuaxo commented Jul 16, 2015

Possibly the problem with the right eye is something to do with the way they use 'scale(-1, 1)' to draw features on the right side.

@fathat
Copy link
Owner

fathat commented Jul 19, 2015

Thanks, I got the smiley working in my latest commit. A few things were going on, the use directive wasn't being processed correctly, and as you noticed cx/cy wasn't being initialized. It also wasn't using fx/fy, which it does now, although I need to make it process focal points more correctly.

@stuaxo
Copy link
Contributor Author

stuaxo commented Jul 19, 2015

Awesome, seems to run very well, and with it's radialGradient :)

Guess I need to make this use it now
https://www.youtube.com/watch?v=LLCGgqNOzRI

Not sure if it's worth adding the svg to the svgs, if licensing permits as it, as it has a couple of tricky things inside ?

@stuaxo stuaxo closed this Jul 19, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants