上QQ阅读APP看书，第一时间看更新

stroke-opacity

The stroke-opacity attribute does what you might expect. It sets the opacity of a stroked object. The following sample sets three different opacities on three separate rectangles. You can see stroke interact not just with the background of the page, but with the fill of the rectangle as well, as stroke is centered on the edge of the rectangle and part of it covers the filled-in area:

There is no easy way to change the positioning of the stroke attribute on an SVG element. In graphics programs, it's possible to set the stroke attribute to be on the inside of the box, centered on the edge of the box (which is how SVG does it) and outside the box. There is a proposal in the new SVG strokes ( https://www.w3.org/TR/svg-strokes/) specification to change the alignment of stroke (called stroke-alignment) but there isn't anything in the browser at the present time.

<svg width="400" height="300" viewBox="0 0 400 300" 
  xmlns="http://www.w3.org/2000/svg">
 <rect x="50" y="20" width="300" height="50" fill="none"
  stroke="#000000" stroke-width="20" stroke-opacity=".25"></rect>
 <rect x="50" y="100" width="300" height="50" fill="none"
  stroke="#000000" stroke-width="20" stroke-opacity=".5"></rect>
 <rect x="50" y="180" width="300" height="50" fill="none"
  stroke="#000000" stroke-width="20" stroke-opacity="1"></rect>
</svg>

The output of the preceding code can be seen in the following screenshot:

Now that we've looked at the different options for strokes, it's time to look at some of the other options for fills. These are the paint server elements that we mentioned before. You've already encountered one of them, linearGradient. You'll also learn about two others that are commonly used, radialGradient and pattern.