SVG image reference, cropping, masks, and svg Cropping

SVG image reference, cropping, masks, and svg Cropping

Three labels are used for SVG image reference, cropping, and masking:

1. <use> Create A Graphical Reference using tags
2. <clipPath> label cropping Image
3. <mask> label creation mask

<Use> tag

<Use> A tag uses a URI to reference A <g>, <svg>, or other graphic elements with a unique ID attribute and repetition. The original element is copied. Therefore, the original element in the file is only a reference. The original element affects any changes to all copies.

<Use> label. use the xlink: href attribute to reference the image. xlink: href = "# id ".

Example:

<! DOCTYPE html> 
Effect:

Conclusion:
From the code above, we can see that the attributes set by the prototype will inherit and cannot be overwritten, except x and y. Therefore, if you want to reference a property, the prototype cannot be set.
<ClipPath> label<ClipPath> A label is used to define a cut path. A label can create any number of basic shapes, including <path> and <text> elements. The image uses the clip-path attribute to reference clipPath for cropping. clip-path = "url (# clip-id )". Clip-ruleclip-rule = "nonzero (default) | evenodd | inherit"

This attribute is used to determine which points are inside the cropping path. This is a good decision for a simple closed image, but there is a difference between a complicated internal image with holes. The value of this attribute is the same as that of fill-rule. PS: fill-rule calculation method can be viewed: http://blog.csdn.net/cuixiping/article/details/7848369
Example:
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">     <defs>          <clipPath id="c-star">               <polygon points="150 100 179.389 9.54915 102.447 65.4509
　　　　　　　　　    197.533 65.4509 120.611 9.54915"/>          </clipPath>          <clipPath id="c-star-rule">               <polygon points="150 100 179.389 9.54915 102.447 65.4509 197.533 
                   65.4509 120.611 9.54915" transform="translate(-100)" clip-rule="evenodd"/>          </clipPath>          <clipPath id="c-two-grap">               <polygon points="150 100 179.389 9.54915 102.447 65.4509 
　　　　　　　　     197.533 65.4509 120.611 9.54915" transform="translate(0, 100)" />               <rect x="100" y="100" width="50" height="50" />          </clipPath>     </defs>     <rect x="100" y="0" fill="red" width="100" height="100" clip-path="url(#c-star)"/>     <rect x="0" y="0" fill="green" width="100" height="100" clip-path="url(#c-star-rule)"/>     <rect x="100" y="100" fill="blue" width="100" height="100" clip-path="url(#c-two-grap)"/></svg>
Effect:
Conclusion:All images in the cropping path are visible, and all images outside the cropping path are invisible.
<Mask> label
Mask is a container that defines a set of graphs and uses them as translucent media to combine foreground objects and backgrounds.
An important difference between the cropping path and other masks is that the cropping path is a one-bit mask, that is, the objects covered by the cropping path are either completely transparent (visible, inside the cropping path ), it is either completely invisible (invisible, outside the cropping path ). The mask can specify the transparency of different positions.
Example:
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">     <defs>          <linearGradient id="Gradient" gradientUnits="userSpaceOnUse" 
　　　　　　　　x1="0" y1="0" x2="800" y2="0">               <stop offset="0" stop-color="white" stop-opacity="0" />               <stop offset="1" stop-color="white" stop-opacity="1" />          </linearGradient>          <mask id="Mask" maskUnits="userSpaceOnUse" x="0" y="0" width="800" height="300">               <rect x="0" y="0" width="800" height="300" fill="url(#Gradient)" />          </mask>          <mask id="Mask2" maskUnits="userSpaceOnUse" x="0" y="0" width="800" height="300">               <rect x="0" y="0" width="800" height="300" fill="red" />          </mask>          <text id="Text" x="400" y="200" font-family="Verdana" font-size="100" 
　　　　　　　　text-anchor="middle" >               Masked text          </text>     </defs>     <rect x="0" y="0" width="800" height="300" fill="none" />     <use xlink:href="#Text" fill="blue" y="-100" />     <use xlink:href="#Text" fill="blue" mask="url(#Mask)" />     <use xlink:href="#Text" fill="blue" mask="url(#Mask2)" y="100" /></svg>
Effect:

Conclusion:
The effect of the mask is to calculate the final transparency based on the color and transparency of each vertex in the mask, and then when rendering the object, the mask layer with different transparency on the face mask of the object reflects the mask effect.
 
Summary
I still have a question about the transparent computing method. This problem involves the relationship between the color of each vertex and the final transparency, and whether the final transparency calculated by some colors is the same (when I try the masked code, if Mask2 is not set to black or white, the effects of other colors are the same ).
 
References
1. http://www.jb51.net/html5/72268.html
2. http://blog.csdn.net/cuixiping/article/details/7848369
 
This article is an original article. If you repost it, please keep the original source for tracing convenience. If there is any error, thank you for your correction.
Address: http://www.cnblogs.com/lovesong/p/6006264.html