Fissile image in pattern
-
There are two vogotipas on SVG that are embedded in the same pathter:
They have their size.
viewboxand most likely this is the problem thatpattern > imagelength relativelyviewboxHere's an example of the display:/* только для демо */ body {display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0;} svg {box-shadow: 0 0 0 1px red;} svg:not(:last-child) {margin-right: 10px;}<svg style="width: 0; height: 0; position: absolute; top: 0; left: 0; transform: translate(-100%, -100%);"> <pattern id="pattern-img" x="0" y="0" width="128" height="128" viewBox="0 0 512 512" patternUnits="userSpaceOnUse"> <image href="https://i.imgur.com/23k1MXg.jpg"/> </pattern> </svg><svg width="30" height="30" viewbox="0 0 30 30">
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-img)"/>
</svg><svg width="60" height="60" viewbox="0 0 30 30">
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-img)"/>
</svg><svg width="90" height="90" viewbox="0 0 30 30">
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-img)"/>
</svg>How do you put the image on a fixed size that won't change from parenthood?
That's an example of the expected result, but the code isn't coming from here, the SVG, where the patter is used, is changing.viewbox♪/* только для демо */
body {display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0;}
svg {box-shadow: 0 0 0 1px red;}
svg:not(:last-child) {margin-right: 10px;}<svg style="width: 0; height: 0; position: absolute; top: 0; left: 0; transform: translate(-100%, -100%);">
<pattern id="pattern" x="0" y="0" width="30" height="30" viewBox="0 0 20 20" patternUnits="userSpaceOnUse">
<g fill="#333">
<circle cx="5" cy="5" r="5"/> <circle cx="15" cy="15" r="5"/>
</g>
<g fill="#666">
<circle cx="15" cy="5" r="5"/> <circle cx="5" cy="15" r="5"/>
</g>
</pattern>
</svg><svg width="30" height="30" viewbox="0 0 30 30">
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern)"/>
</svg><svg width="60" height="60" viewbox="0 0 60 60">
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern)"/>
</svg><svg width="90" height="90" viewbox="0 0 90 90">
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern)"/>
</svg>Infa:
patternUsed as a seamless texturebackground-repeat: repeat)- texture is as follows:
-
Any adjustment to positioning and scale of vegetation inside
patterncannot solve the problem of any artifact in the filling of patternity objects 100%. In one place, you'll pick the necessary parameters, on the other hand the letters will show new artifacts.It should also be taken into account that there is dual-scale and positioning when svg patrons are delivered and when the paternity of another facility is filled.
And if it is possible, after long agonizing, to find a more and less appropriate result on its PK, it will look somewhat differently with a high probability. Since other users may have other default prints, other screen approvals, other LOs, other browser, another video card.
I suggest a different approach.
Instead of a vegetation picture of a coloured logo, use the letters as vector objects that can be filled with SVG butter with coloured rectangles as an image in the example of the question.
In the first example, in a 100x100px pattern, only one line is filled with coloured 5 squares 10 x 10 px. This line goes back 10 times, so it's got colored poles.
.letter {stroke:black;
stroke-width:2;
}#gr {
fill:url(#myLet);
}<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-60 0 1000 250" version="1.1" id="svg2" style="border:1px solid;background:#111;">
<defs>
<pattern id="myLet"
x="-33" y="19" width="100" height="20"
patternUnits="userSpaceOnUse" >
<g stroke="black">
<rect fill="#DF2500" stroke="black" x="0" y="0" width="20" height="20" />
<rect fill="#DEFF01" stroke="black" x="20" y="0" width="20" height="20" />
<rect fill="#03FF59" stroke="black" x="40" y="0" width="20" height="20" />
<rect fill="#62F7FA" stroke="black" x="60" y="0" width="20" height="20" />
<rect fill=" #8800FB" x="80" y="0" width="20" height="20" />
</g>
</pattern></defs>
<g id="gr" >
<path id="D" class="letter" d="M15 200c37 0 59-29 59-68V88c0-44-23-68-61-68h-43c-2 0-3 1-3 3v174c0 2 1 3 3 3zm11-56c0 7-5 7-7 7l-1-2V69l1-2 5 1 2 6z" />
<path id="E" class="letter" d="M102 197c0 1 1 3 3 3h86c1 0 2-1 2-3v-44c0-2-1-3-2-3h-42l-1-2v-14l1-2h20l2-2V87l-2-2h-19l-2-2V70l2-2h40c2 0 3-1 3-2V22c0-1-1-2-3-2h-85c-2 0-3 1-3 3z" />
<path id="dot" class="letter" d="m257 166-2-1h-30l-2 2v30l2 3h29c2 0 3-1 3-3z" />
<path id="M" class="letter" d="M330 200c1 0 2-1 2-3v-70l1-3c1 0 2 0 3 5l11 68c0 2 1 3 2 3h27c2 0 3-1 3-2l13-74 1-5 1 3v75c0 2 1 3 3 3h43c1 0 3-1 3-3V22c0-1-1-2-3-2h-67l-2 2-6 48-1 2-1-2-7-48-3-2h-64l-2 2v176l2 2z" />
<path id="I" class="letter" d="m516 200 2-3V22l-2-2h-42l-2 2v174c0 2 2 4 3 4z" />
<path id="N" class="letter" d="M548 196c0 2 1 4 3 4h36c2 0 3-2 3-3v-43l1-3c1 0 2 1 2 3l11 43c0 2 2 3 3 3h45l2-3V23c0-2-1-3-3-3h-36c-2 0-3 1-3 3v53l-1 4-2-3-14-54c-1-2-2-3-4-3h-40c-2 0-3 1-3 3z" />
<path id="O" class="letter" d="M682 146c0 37 24 55 50 55 27 0 50-18 50-55V75c0-38-23-56-50-56-26 0-50 18-50 56zm47-71c0-3 1-6 3-6 3 0 4 3 4 6v70c0 3-1 6-4 6-2 0-3-3-3-6z" />
<path id="V" class="letter"d="M850 22c0-1-1-2-3-2h-43c-1 0-2 1-1 2l32 175 3 3h47c1 0 3-1 3-3l33-174c0-2 0-3-2-3h-41c-2 0-3 1-3 3l-10 74-1 2-2-2z" />
</g>
</svg>There are five lines of patter, each filled with five zv squares.
Inside the lines, one-coloured squares are replaced, such as red. That's how the flower's needed.Some evasion of a part of a colour square is caused by the fact that the letters of this type have different widths. There's a need to use a monoshire print.
.container{
width:100vw;
height:auto;
}
.letter {
stroke:black;
stroke-width:2;
}#gr {
fill:url(#myLet);
}<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-40 -19 1000 250" version="1.1" id="svg2" style="border:1px solid;background:#111;">
<defs>
<pattern id="myLet"
x="-33" y="19" width="100" height="100"
patternUnits="userSpaceOnUse" >
<g stroke="black" >
<!-- 1-строка -->
<rect fill="#DF2500" stroke="black" x="0" y="0" width="20" height="20" />
<rect fill="#DEFF01" stroke="black" x="20" y="0" width="20" height="20" />
<rect fill="#03FF59" stroke="black" x="40" y="0" width="20" height="20" />
<rect fill="#62F7FA" stroke="black" x="60" y="0" width="20" height="20" />
<rect fill=" #8800FB" x="80" y="0" width="20" height="20" />
<!-- 2-строка -->
<rect fill=" #8800FB" x="0" y="20" width="20" height="20" />
<rect fill="#DF2500" x="20" y="20" width="20" height="20" />
<rect fill="#DEFF01" x="40" y="20" width="20" height="20" />
<rect fill="#03FF59" x="60" y="20" width="20" height="20" />
<rect fill="#62F7FA" x="80" y="20" width="20" height="20" /><!-- 3-строка --> <rect fill="#62F7FA" x="0" y="40" width="20" height="20" /> <rect fill=" #8800FB" x="20" y="40" width="20" height="20" /> <rect fill="#DF2500" x="40" y="40" width="20" height="20" /> <rect fill="#DEFF01" x="60" y="40" width="20" height="20" /> <rect fill="#03FF59" x="80" y="40" width="20" height="20" /> <!-- 4-строка --> <rect fill="#03FF59" x="0" y="60" width="20" height="20" /> <rect fill="#62F7FA" x="20" y="60" width="20" height="20" /> <rect fill=" #8800FB" x="40" y="60" width="20" height="20" /> <rect fill="#DF2500" x="60" y="60" width="20" height="20" /> <rect fill="#DEFF01" x="80" y="60" width="20" height="20" /> <!-- 5-строка --> <rect fill="#DEFF01" x="0" y="80" width="20" height="20" /> <rect fill="#03FF59" x="20" y="80" width="20" height="20" /> <rect fill="#62F7FA" x="40" y="80" width="20" height="20" /> <rect fill=" #8800FB" x="60" y="80" width="20" height="20" /> <rect fill="#DF2500" x="80" y="80" width="20" height="20" /> </g> </pattern></defs>
<g id="gr" >
<path id="D" class="letter" d="M15 200c37 0 59-29 59-68V88c0-44-23-68-61-68h-43c-2 0-3 1-3 3v174c0 2 1 3 3 3zm11-56c0 7-5 7-7 7l-1-2V69l1-2 5 1 2 6z" />
<path id="E" class="letter" d="M102 197c0 1 1 3 3 3h86c1 0 2-1 2-3v-44c0-2-1-3-2-3h-42l-1-2v-14l1-2h20l2-2V87l-2-2h-19l-2-2V70l2-2h40c2 0 3-1 3-2V22c0-1-1-2-3-2h-85c-2 0-3 1-3 3z" />
<path id="dot" class="letter" d="m257 166-2-1h-30l-2 2v30l2 3h29c2 0 3-1 3-3z" />
<path id="M" class="letter" d="M330 200c1 0 2-1 2-3v-70l1-3c1 0 2 0 3 5l11 68c0 2 1 3 2 3h27c2 0 3-1 3-2l13-74 1-5 1 3v75c0 2 1 3 3 3h43c1 0 3-1 3-3V22c0-1-1-2-3-2h-67l-2 2-6 48-1 2-1-2-7-48-3-2h-64l-2 2v176l2 2z" />
<path id="I" class="letter" d="m516 200 2-3V22l-2-2h-42l-2 2v174c0 2 2 4 3 4z" />
<path id="N" class="letter" d="M548 196c0 2 1 4 3 4h36c2 0 3-2 3-3v-43l1-3c1 0 2 1 2 3l11 43c0 2 2 3 3 3h45l2-3V23c0-2-1-3-3-3h-36c-2 0-3 1-3 3v53l-1 4-2-3-14-54c-1-2-2-3-4-3h-40c-2 0-3 1-3 3z" />
<path id="O" class="letter" d="M682 146c0 37 24 55 50 55 27 0 50-18 50-55V75c0-38-23-56-50-56-26 0-50 18-50 56zm47-71c0-3 1-6 3-6 3 0 4 3 4 6v70c0 3-1 6-4 6-2 0-3-3-3-6z" />
<path id="V" class="letter"d="M850 22c0-1-1-2-3-2h-43c-1 0-2 1-1 2l32 175 3 3h47c1 0 3-1 3-3l33-174c0-2 0-3-2-3h-41c-2 0-3 1-3 3l-10 74-1 2-2-2z" />
</g>
</svg>
</div>
Update
2nd Leg
.container{
width:100vw;
height:auto;
}
.letter {
stroke:black;
stroke-width:2;
}#M {
fill:url(#myLet);
}<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-60 0 1000 250" version="1.1" id="svg2" style="border:1px solid;background:#111;">
<defs>
<pattern id="myLet"
x="-33" y="19" width="20" height="20"
patternUnits="userSpaceOnUse" >
<g stroke="black">
<rect fill="#F02501" stroke="#C22101" x="0" y="0" width="20" height="20" /></g> </pattern></defs>
<path id="M" class="letter" d="M330 200c1 0 2-1 2-3v-70l1-3c1 0 2 0 3 5l11 68c0 2 1 3 2 3h27c2 0 3-1 3-2l13-74 1-5 1 3v75c0 2 1 3 3 3h43c1 0 3-1 3-3V22c0-1-1-2-3-2h-67l-2 2-6 48-1 2-1-2-7-48-3-2h-64l-2 2v176l2 2z" /></g>
</svg>
