html5 - properly align svg polygon -


Therefore, I am trying to create a portfolio page and I want to use custom size. So instead of the used devices, I am using a SVG polygon size to keep background IMG. Note, this is the first time that I work with SVG and I am trying to fix it all day.

So basically, the problem is, the bottom left and upper-right cutting of the edge of my shape is trying to reduce the width / height of the polygon but it does not work properly Used to be.

This is my html code and it is also working jsfiddle: 

   & Lt; / Pattern & gt; & Lt; / Defs & gt; & Lt; Polygon numeral = "96.72 9, 27.124, 0,49010867.032,420.878 900,0" fill = "url (# img1)" /> & Lt; / Svg & gt; & Lt; / Div & gt;

So, can anyone help me?

OK I see some things are wrong Let's start already and work through it .

For a start, your polygon is 900x490, but you are specifying a pattern with dimensions of 890x480. The reason for this is why you are receiving "trimmed" corners - your pattern is not expanding the entire width and height of the polygon.

If we fix this, we get almost there. I've added a red line to show the polygon setting more clearly.

It is still not right at all. The reason for this is that the aspect ratio of your polygon / pattern (900/490 ~ = 1.84) is not the same as the aspect ratio of your image (570/300 = 1.9) in the top and bottom too. What is the renderer doing 500x370 image by its & lt; Image & gt; Scaling to fit within specified dimensions for , while maintaining the same aspect ratio, the result is 900 x 473.7 (473.7 = 900 / 1.9), which is vertically centered in your 900x490 pattern. It is leaving approximately 6 pixels on the top and bottom.

There are a few ways to fix this: Obviously one either has to change the image or polygon so that their aspect ratio is exactly match.

Another way to fix this is to change the way the image is scaled. By default, the image is enhanced to fit the width and height you specify, but does not go beyond those dimensions. This means that sometimes one difference will be saved - as we are seeing, you can convert it to a different scaling mode which tells it to scale to maximize the interval with no interval. You do this by setting the maintenance aspatariteo = "xMidYMid piece" on the image. 

  & lt; Image xlink: href = "[... cutting ...]" X = "0" y = "0" width = "900" height = "490" defense area line = "xmidimid piece" />

You can see that the polygon is now completely filled.


Comments

Post a Comment

Popular posts from this blog

python - Overriding the save method in Django ModelForm -

I'm having trouble overriding a ModelForm save method. I get this error I'm: Exception type: TypeErier Exception Value: Save () found an unexpected keyword argument 'committed' My intentions include a form 3 fields Submit several values ​​for, then create an object for each combination of those areas, and to save each object file models.py class collarsult type (models.Model): id = model. AutoField (db_column = 'icontact_result_code_type_id', primary_key = true) callResult = models.ForeignKey ( 'CallResult', db_column = 'icontact_result_code_id') campaign = models.ForeignKey ( 'campaign', db_column = 'icampaign_id') CALLTYPE = models.ForeignKey ( 'CALLTYPE', db_column = 'icall_type_id') agent = models.BooleanField (db_column = 'bagent', default = true) teamLeader = models.BooleanField (db_column = 'bTeamLeader', default = true) active = models.BooleanField (db_column = Django.form...
Read more

html - CSS autoheight, but fit content to height of div -

I have a div in which there are three children- div in the left and middle div: float: left while true: float: true because it is my layout Actually will spoil, I've used ClearFix Hack: .cf {zoom: 1; }. Cf: First,. Cf: {content: ""; Display: Table; }. Cf: After {clear: both; } It still works, but I want to be the right div an indicator. So it should fill 100% of the parent unit of height. How can I complete this? PS is the full code: & Lt; / Div & gt; & Lt; Div class = "mobile_content" & gt; & Lt; H5 & gt; {{Data.titel}} & lt; / H5> & Lt; Table & gt; & Lt; TR & gt; & Lt; Th & gt; Komponist: & lt; / Th & gt; & Lt; TD & gt; {{Data.komponist}} & lt; / TD & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; Th & gt; Instrument: & lt; / Th & gt; & Lt; TD & gt; {{Data.instrumente}} & lt; / TD & gt; & Lt; / TR & gt;...
Read more

qt - How to prevent QAudioInput from automatically boosting the master volume to 100%? -

I have been trying to use Qt5 multimedia to record audio with QAudioInput, however, when I see If QAudioInput is started, it increases the master volume of my sound device to 100%. How can I prevent QAudioInput from changing the master volume? My current development platform is Linux with PalsAdio (with flat audio disabled). How can I use QAudioInput : QAudioDeviceInfo device_info = QAudioDeviceInfo :: defaultInputDevice (); QAudio format format; Format.setSampleRate (44100); Format.setChannelCount (1); Format.setSampleSize (16); Format.setCodec ("Audio / PCM"); Format.setSampleType (QAudioFormat :: SignedInt); Format.setByteOrder (QAudioFormat :: LittleEndian); Std :: cout & lt; & Lt; Device_info.deviceName (). ToUtf8 (). ConstData () & lt; & Lt; Std :: endl; QAudioInput * default_device = new QAudioInput (device_info, format); QIODevice * default_io_device = default_device-> Start (); a QAudioInput.setVolume () method is not you I ...
Read more